2012-03-13 9 views
0

私は前にこれに類似した質問をしてきましたし、私はすでに述べたように、いくつかの類似したQ &を見てきましたが、それらの非は私の要件に合わせ(または私は単純にそれらを得るために、JSの知識を持っていません作業!)。jQueryのUI toggleClass

私は、サブメニューを表示し、非表示にするjQueryのUI toggleClassを使用する設定simple css/jquery menuを持っています。

私は別のをクリックしたときに開いているサブメニューを閉じることで、この上で改善したいと思います。誰も私にこれを行う方法を説明することはできますか?ありがとう。

答えて

2

あなたの関数にこれを追加します。

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

ここにあなたのフィドルです、更新:http://jsfiddle.net/abKhH/1/


P.S.を @ Colinのソリューションも動作しますが、上記のソリューションはパネルを同時に開閉するため、少し上手くできます。

0

私は、すべてのサブメニューがクリックされたものを開く前に閉じていることを確認しますあなたのjQueryの行を追加しました。

jsfiddle

+0

おかげで、これは動作しますが、@Joseph SILBERのソリューションは、彼のソリューションが進歩して、私は同意 –

+0

少し滑らかです。私はそれを "借りる"つもりです! :) –

0

応答に少し遅いが、それは余分な答えを持っているに越したことはありません! 編集:これは、それが唯一の原因の連鎖に一度$(「#メインのナビゲーション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/

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