当我有多个 <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");
});
最佳答案
只切换同一个父元素中的 ul 元素:
$(".btn-toggle").on('click', function(){
$(this).closest("div").find("ul").toggle("fast");
});
也就是说,从单击的元素 (this
) 开始,向上导航到包含它的 div,然后返回到 ul。
上下文演示:
$(".btn-toggle").on('click', function(){
$(this).closest("div").find("ul").toggle("fast");
});
<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>
关于javascript - 单独定位 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38884117/