Question

我遇到一个问题，我确信这很简单，但是我花了好几个小时试图让它工作无济于事。

每次单击父列表项时，我都会尝试显示嵌套列表。

这是JQuery：

<script type="text/javascript">
 $(document).ready(function() {

  $("#menu ul ul" ).hide();


$("#menu ul li").click(function() {
$(this).next().toggle();
});
});
</script>

这是HTML：

<div id="menu">
<ul>
<li><a id="database" href="#">Database</a></li>

<ul>
<li><a href="#">view database</a></li>
<li><a href="#">edit database</a></li>
</ul>

<li><a id="production" href="#">Production</a></li>
<ul>
<li><a href="#">add order</a></li>
<li><a href="#">plan orders</a></li>
</ul>
</ul>
</div>

现在，当我单击fisrt ul li时，正确的嵌套列表会切换，但是当我单击嵌套的li时，它们也会切换。它必须与我选择第一个嵌套列表的方式有关...

非常感谢任何帮助！

Answer 1

首先，让我们得到一些有效的标记，<ul>元素不能是另一个<ul>的直接子元素，它们应该在<li>内，如下所示：

<div id="menu">
    <ul>
        <li><a id="database" href="#">Database</a>            
            <ul>
                <li><a href="#">view database</a></li>
                <li><a href="#">edit database</a></li>
            </ul>
        </li>

        <li><a id="production" href="#">Production</a>
            <ul>
                <li><a href="#">add order</a></li>
                <li><a href="#">plan orders</a></li>
            </ul>
        </li>
    </ul>
</div>

之后，您只需要阻止click事件冒泡到父<li>，就像这样：

$("#menu ul li").click(function(e) {
  $(this).children("ul").toggle();
  e.stopPropagation();
});

You can test it out here

简单的JQuery嵌套列表遍历问题

1 个答案: