Question

我有一个有多行的表。行内有行选项：

HTML CODE：

<ul class="rowOptions">
    <li>
        <img src="/images/navigation/arrow.png">
        <ul>
            <li><a href="javascript:updateRow(data)">Update</a></li>
            <li><a href="javascript:deleteRow(data);">Remove Link</a></li>
            <li><a href="javascript:archiveRow(data);">Archive Contact</a></li>
        </ul>
    </li>
</ul>

最初，内部ul显示悬停，但我们希望仅在单击img时才显示选项。到目前为止，我试过了：

JQUERY CODE：

$(document).on('click','.rowOptions img', function () {
    $('.rowOptions li ul').slideToggle();
});

代码在实现显示内部列表的任务方面非常有效，除了它显示所有行的内部列表而不是被单击的行。

Answer 1

使用$(this)

使用活动来源

$(document).on('click','.rowOptions img', function () {
    $(this).closest('li').find('ul').slideToggle();
});

Answer 2

$(document).on('click','.rowOptions img', function () {
   $(this).parent().find('ul').slideToggle();
});

Answer 3

尝试指出主菜单列表中的子列表并切换。

HTML CODE：

<ul class="rowOptions">
<li>
    <img src="http://bxslider.com/images/730_100/tree_root.jpg">
    <ul>
        <li><a href="javascript:updateRow(data)">Update</a></li>
        <li><a href="javascript:deleteRow(data);">Remove Link</a></li>
        <li><a href="javascript:archiveRow(data);">Archive Contact</a></li>
    </ul>
</li>
     <li>
    <img src="http://bxslider.com/images/730_100/tree_root.jpg">
    <ul>
        <li><a href="javascript:updateRow(data)">Update</a></li>
        <li><a href="javascript:deleteRow(data);">Remove Link</a></li>
        <li><a href="javascript:archiveRow(data);">Archive Contact</a></li>
    </ul>
  </li>
</ul>

JQUERY CODE：

$(document).on('click', '.rowOptions img', function () {
    $(this).parent().find('ul').slideToggle();
});

现场演示：

http://jsfiddle.net/p7v8p/3/

快乐编码：）

JQuery slide切换列表中的列表

3 个答案: