我有一个问题，我确信它非常简单，但我花了几个小时试图让它工作但无济于事。
我试图在单击父列表项时显示嵌套列表。
这是 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>
现在，当我单击第一个 ul li 时，正确的嵌套列表会切换，但是当我单击嵌套 li 时，它们也会切换。这一定与我选择第一个嵌套列表的方式有关......
任何帮助深表感谢！
首先，让我们获得一些有效的标记，<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();
});
你可以在这里测试一下.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
