javascript - jQuery .toggle() 不显示/隐藏 .on 'click' 内的所有内容？

Question

我实际上遇到了与 How to prevent jQuery .toggle() to show/hide all within .on 'click' 相同的问题但这没有帮助，所以我提出了自己的问题。

是否有办法阻止切换显示全部，而是仅显示用户单击所需的切换？ (extra topping -> extra_toppings selected)我确实尝试了使用 ID 的最低限度知识以及 this、next()、parents()但没有成功。

这是我的代码:

JavaScript

$(".extra_topping").click(function() {
  $(".extra_toppings").toggle('slow');
});

HTML

(在所有食物的循环内:@foods.each do |food| ...)

<div class="extra_topping">
  <a>Click Me!</a>
</div>

<div class="extra_toppings">
  <a> Show </a>
</div>

我将原始 HTML 缩短为这样以简化问题。

这是我的实际代码:(没有 Rails 代码)

<table class="table">
  <thead >
  <tr>
    <th>Name</th>
    <th>Price</th>
    <th>Category</th>
    <th>Quantity</th>
    <th>Actions</th>
    <th>Additional Menu</th>
    </tr>
</thead>
<tbody>

  <tr>
    <td>
    </td>
    <td id="food" style="font-weight:bold;">

    </td>
    <td>

    </td>   

    <td>

    </td>
    <td>

    </td>
    <td>
    <div class="extra_topping">
        <a>Click me!</a>
    </div>                      
    </td>
</tr>
<tr class="extra_toppings">
    <td>
    </td>
    <td colspan="4">
        <div class= "mediocre">
            <div class= "xaxixo">
                <h6>Our Additional Menu</h6>
            </div>
            <div class="extra_topping">



            </div>

            <table class="mediocre_table">
            <tr>
                <td>
                    <div class="full_mediocre">

                              <div class="mediocre_collumn">

                              </div>

                </div>
                </td>
            </tr>
          </table>
        </div>
    </td>
    <td>
    </td>   
</tr>

</tbody>

Answer 1

您可以使用:

$(".extra_topping").click(function(){
  $(this).next('.extra_toppings').toggle('slow');
});

如果这就是您的标记始终的样子，例如

<div class="extra_topping">
    <a>Click Me!</a>
</div>       
<div class="extra_toppings">
    <a> Show </a>
</div> 

<div class="extra_topping">
    <a>Click Me!</a>
</div>      
<div class="extra_toppings">
    <a> Show </a>
</div> 

jsFiddle here.