jquery - slidetoggle JQuery の複数のインスタンス

Question

サイトのページの上部にナビゲーションを表示するために使用している 3 つの div があります。すべて JQuery 関数を使用します。

$('#div_button').click( function() {
        $('#div_nav').slideToggle();
);

問題は、2 つのスライドトグル/div を重ねて配置するシナリオがあり、それがうまくいかないことです。1 つのボタンをクリックして slideToggle を開始すると、現在表示されている他の div を削除したいと思います。

問題を説明する図:

互いの上に 2 つの DIVS

誰でも解決策を提案できますか?

前もって感謝します

score 0 · Accepted Answer

hide()他のすべてをdiv最初に

$('#div_button').click( function() {
    $('.otherDivClass').hide(); 
   $('#div_nav').slideToggle();
);

score 0 · Accepted Answer

Accordion のようなプラグインを使用すると、見出しやコンテンツ要素にクラスを追加しなくても、目的の機能を適用できます。

別の方法として、ID の使用に固執する必要があると確信している場合は、3 つの個別のクリック関数を記述し、それぞれで関連する要素を開いたり閉じたりすることもできます。

score 0 · Accepted Answer

この問題を解決する方法を見つけることができました。基本的に、この関数を使用して、他のslideTogglesまたはslideUPが完了するのを待つ必要があります:

$('#tcd-home-view-nav').slideUp(function(){
    // Animation complete.
    $('#tcd-home-edit-nav').slideToggle();
});

これを解決するのを手伝ってくれた人々に乾杯。クリス

3 に答える 3