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

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();
});

你可以在这里测试一下.