Question

当我有多个<td>并点击我的按钮时，它会打开表格中的所有列表，但我并不想要这样。我只想在那个具体的<tr>中打开它。我不知道如何使用一个javascript代码单独定位它。

Html代码：

<table class="block-IPs-table" id="block-IPs-table">
<thead>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td class="widht-400 vertical-align-bottom">
            <div class="menu-toggle-left clearfix pull-right">
              <ul class="toggle-left clearfix">
                <li class="">
                    <a href="#"><i class="fa fa-ban active-red fa-2x"></i></a>
                </li>
                <li class="">
                    <a href="#"><i class="fa fa-times fa-2x"></i></a>
                </li>
            </ul>
              <button class="btn btn-toggle btn-left-click" type="button" id=""><i class="fa fa-ellipsis-h fa-2x" aria-hidden="false"></i></button>
            </div><!-- menu toggle -->
        </td>
    </tr>
</tbody>
</table>

这是我的javascript代码：

var menuWrapper = $('.menu-toggle-left'),
                     button = menuWrapper.find('.btn-toggle'),
   menu = menuWrapper.find('ul');
   menu.hide()
   $(".btn-toggle").on('click', function(){
      menu.toggle("fast");
   });

我单击一个图像时的图像：

Answer 1

仅切换同一父级中的ul元素：

$(".btn-toggle").on('click', function(){
  $(this).closest("div").find("ul").toggle("fast");
});

也就是说，从点击的元素（this）开始，直到它的包含div，然后返回到ul来浏览DOM。

在上下文演示中：

＆＃13;

$(".btn-toggle").on('click', function(){
  $(this).closest("div").find("ul").toggle("fast");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="block-IPs-table" id="block-IPs-table">
<thead>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td class="widht-400 vertical-align-bottom">
            <div class="menu-toggle-left clearfix pull-right">
              <ul class="toggle-left clearfix">
                <li class="">
                    <a href="#">Item a1<i class="fa fa-ban active-red fa-2x"></i></a>
                </li>
                <li class="">
                    <a href="#">Item a2<i class="fa fa-times fa-2x"></i></a>
                </li>
            </ul>
              <button class="btn btn-toggle btn-left-click" type="button" id=""><i class="fa fa-ellipsis-h fa-2x" aria-hidden="false">Toggle</i></button>
            </div><!-- menu toggle -->
        </td>
    </tr>
      <tr class="odd gradeX">
        <td class="widht-400 vertical-align-bottom">
            <div class="menu-toggle-left clearfix pull-right">
              <ul class="toggle-left clearfix">
                <li class="">
                    <a href="#">Item b1<i class="fa fa-ban active-red fa-2x"></i></a>
                </li>
                <li class="">
                    <a href="#">Item b2<i class="fa fa-times fa-2x"></i></a>
                </li>
            </ul>
              <button class="btn btn-toggle btn-left-click" type="button" id=""><i class="fa fa-ellipsis-h fa-2x" aria-hidden="false">Toggle</i></button>
            </div><!-- menu toggle -->
        </td>
    </tr>
</tbody>
</table>

＆＃13;

目标separetly div元素

1 个答案: