0

我实际上遇到了与如何防止 jQuery .toggle() 在 .on 'click' 中显示/隐藏所有内容相同的问题，但它没有帮助，所以我提出了自己的问题。

有没有办法阻止切换显示全部，而是只显示用户点击的必要切换？（额外的浇头-> 选择了额外的浇头）我确实尝试过使用 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>
4

2 回答 2

2

你可以使用：

$(".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在这里。

于 2013-07-06T21:09:16.710 回答
0

我终于通过将代码更改为：

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

进入：

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

有用！

于 2013-07-09T04:56:01.833 回答