jQuery UI toggleClass

Question

我已经问过类似的问题了，我已经看过几个类似的Q &因为已经但它们都不符合我的要求（或者我根本没有js知识让它们工作！）。

我有一个simple css/jquery menu设置，它使用jQuery UI toggleClass来显示和隐藏子菜单。

我想通过关闭任何打开的子菜单来改善这种情况，当另一个被点击时。任何人都可以向我解释如何做到这一点？谢谢。

Answer 1

添加到您的函数：

$(this).parent().siblings().find('ul:not(.navhidden)').addClass('navhidden', 'fast'); 

这是你的小提琴，更新：http://jsfiddle.net/abKhH/1/

---

附： @科林的解决方案也有效，但我上面的解决方案是更好一点，因为它同时打开和关闭面板。

Answer 2

我添加了一行到您的jQuery，这将确保所有的子菜单在打开被点击之前关闭。

jsfiddle

Answer 3

响应速度有点慢，但它从来没有伤害有额外的答案！ 编辑：由于链接只执行一次$（'＃main-nav a.dd'）选择器，所以它的性能稍有提高。如果你不熟悉，.end（）通过前面的选择取消.next（）。

$('#main-nav a.dd').next().addClass('navhidden') 
    .end().click(function() { 
     $('#main-nav a.dd').not(this).next().each(function() { 
      if (!$(this).hasClass("navhidden")) { 
       $(this).addClass("navhidden"); 
      } 
     }); 
     $(this).next().toggleClass('navhidden', 'fast'); 
     return false; 
}); 

http://jsfiddle.net/6Qer7/

Answer 4

$('#main-nav').hasClass('firstClass') ? $('#main-nav').addClass('SecondClass'): $('#main-nav').hasClass('firstClass');