Закройте открытые divs при открытии нового

Question

Я пытаюсь создать меню, но у меня проблемы с закрытием меню, которые открываются при открытии нового.

Я пробовал hide(), но он не работает во всех случаях, вот мой код, прежде чем я попытался использовать любые методы закрытия.

Я хочу, чтобы только одна из этих трех функций открывалась в любой момент времени.

Когда кто-то открыт - все, которые уже открыты, должны отменить все открытые.

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. Инициализируйте их как ложные. В обратном вызове каждого из них установите соответствующий, противоположный самому себе. например. isFilterOpen=!isFilterOpen.

Затем вызовите slideToggle снова для каждого из двух ДРУГИХ элементов. При обратном вызове внутреннего слайд-тега обязательно отмените логическое значение. Так, например, это будет код slideToggle для filters_menu:

$('#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/