jQuery切换奇怪的问题？

Question

我有一个菜单/ UL与一群LI的，而那些李里面，我有一些更多的UL，李...看一看：

<ul class='parent'> 
    <li><a>Boules</a></li> 
    <li> 
    <a>Livres</a> 
    <ul class='child'>  
     <li><a>Magazines</a></li> 
     <li><a>Revues</a></li> 
     <li><a>Romans</a></li> 
    </ul> 
    </li> 
    <li> 
    <a>Wirelace (3 childs)</a>  
    <ul class='child'> 
     <li><a>Bleu</a></li> 
     <li> 
     <a>Rouge</a> 
     <ul class='subchild'> 
      <li><a>4mm</a></li> 
      <li><a>6mm</a></li>  
     </ul> 
     </li> 
     <li> 
     <a>Vert</a> 
     <ul class='subchild'> 
      <li><a>2mm</a></li> 
      <li><a>4mm</a></li>  
      <li><a>6mm</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

所有UL .child和.subchild是用CSS隐藏display:none;所以当你加载页面时你看到的只是PARENT类（Boules，Livres，Wirelace）的3个LI。

我有了这个jQuery代码（按预期工作）来切换UL的.child显示，当点击李露面，但subchild UL留下隐患，符合市场预期：

$("ul.parent li a").click(function() { 
    $(this).next().toggle(); 
    return false; 
}); 

我也有这样的一个UL .subchild，但它不能正常工作，即使是相同的：

$("ul.child li a").click(function() { 
    $(this).next().toggle(); 
    return false; 
}); 

它按预期工作，如果我做的：

$(this).next().toggle().toggle(); 

如果我只使用1个切换键，它会在显示器中播放（我在Firebug中看到它），但是如果它被隐藏（通过原始CSS），它会添加display：none。如果我删除CSS（使其在页面加载时可见），它会添加display：block。

它按预期行事的唯一方法是如果我用show（）或hide（）强制它。但后来我没有切换功能。

即使是if($(this).is("visible"))将无法​​正常工作......

这是在火狐，Chrome，Safari浏览器，IE8。

对于长篇文章，我很抱歉，任何人都有一个想法，可能会导致什么...... ???

Answer 1

的问题是，事实上，选择

ul.parent li a 

足够一般也选择ul.child li a，所以.child下的元素实际上已经连接到他们两个处理程序。如果你只是让选择器更具体，你可以避免这个问题。

ul.child > li > a, ul.parent > li > a 

也可以尝试使用子选择，ul > li > ul而不是给他们班，以表明他们是孩子。