新しいものを開くときに開いているdivを閉じる

Question

私はメニューを作ろうとしていますが、新しいメニューが開いたときに開いているメニューを閉じるのに問題があります。

私はhide()を試してみましたが、すべてのインスタンスで動作するようには見えません。

これら3つの機能のうち1つだけをいつでも開くことができます。

オープンされている場合は、すでに開いているものは、開いたものを逆にする必要があります。私が達成しようとしています何

Fiddle

//Open/close filters pack menu 
$('#filters__menu--show').click(function() { 
    $('#filters__menu').slideToggle('750',"swing", function() { 
    }); 
}); 
//Open/close stickers pack menu 
$('#stickers__menu--show').click(function() { 
    $('#stickers__section').slideToggle('750',"swing", function() { 
    }); 
}); 
//draw row + menu open 
$('#draw__menu--show').click(function() { 
    $('#draw__colors').slideToggle('750',"swing", function() { 
    }); 
    //when draw is open close primary save/restart 
    $("#done").fadeOut('750'); 
    $("#restart").fadeOut('750'); 
    $("#app__menu").fadeOut('750'); 
    $("#draw__menu").fadeIn('750'); 
}); 

新しいメニューを開いたときに、他のメニューのは、彼らが開いてきたすべてが逆転している/閉じられています。

私は＃draw__menuで特に問題があります - それはslideTogglesとfadeOutの他の要素と同じように表示されます。

hide（）はこれについて正しい方法ですか？

Answer 1

isFiltersOpen、isStickersOpen、isDrawMenuOpenという3つのブール変数を導入します。それらをfalseとして初期化します。それぞれのコールバックでは、対応するものをそれ自身の反対に設定します。例えば。 isFilterOpen=!isFilterOpen。

次に、2つのOTHER要素のそれぞれについてslideToggleを再度呼び出します。内部のslideToggleのコールバックで、ブール値を逆にしてください。たとえば、これはfilters_menuのslideToggleのコードになります。

$('#filters__menu--show').click(function() { 
    $('#filters__menu').slideToggle('750',"swing", function() { 
    isFilterOpen=!isFilterOpen; 
    if(isStickersOpen){ 
    $('#stickers__section').slideToggle('750',"swing", function() { 
     isStickersOpen=!isStickersOpen; 
    } 
    ); 
    } 
    if(isDrawMenuOpen){ 
    $('#draw__colors').slideToggle('750',"swing", function() { 
     isDrawMenuOpen=!isDrawMenuOpen; 
    } 
    ); 
    } 
}); 
}) 

これをそれぞれ行います。より洗練されたものにするには、関数のコードの一部をラップすることができます。

Answer 2

@Barmarのようにすることができます。クリックして閉じるすべての要素の共通クラスを追加して、クロージング効果（hide()またはslideUpまたは...）を追加します。あなたの視覚に最も適したものをテストすることができます。ここでは例を示します（アニメーションを保持するのにslideUp()を使用していますが、アニメーションを使用しない場合はhide()を使用できます）。https://jsfiddle.net/sk4m2w2d/2/