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

我有一个问题，我肯定很简单，但我花了几个小时试图让它工作无济于事。

我试图在单击父列表项时显示嵌套列表。

这是JQuery：

 $(document).ready(function() { $("#menu ul ul" ).hide(); $("#menu ul li").click(function() { $(this).next().toggle(); }); });  

这是HTML：

 
 
 
Database
 
 
view database
 
edit database
 
 
Production
 
 
add order
 
plan orders
 
 
  

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

任何帮助深表感谢！

Answer 1

首先，让我们得到一些有效的标记，

元素不能是另一个

直接子元素，它们应该在

，如下所示：

 
 
 
Database 
 
view database
 
edit database
 
 
 
Production 
 
add order
 
plan orders
 
 
 
  

之后，您只需要停止click事件冒泡到父

，如下所示：

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

你可以在这里测试一下 。