Как сделать закрытие при нажатии на другой пункт меню?

Question

[Anto]

Добрый вечер, подскажите как сделать закрытие открытого меню при открытии нового?
Пример кода тут

Сам сайт тут - верхнее меню

Comments

[Anto]

Владимир @, Да попросили помочь. А с этим не могу разобраться с JS не сильно дружу.

[Anto]

Владимир @, Так получилось,

Answer 1

[Михаил]

Для всех элементов меню которые открывают контейнер, прописываешь атрибут class="menu-trigger-open"
Для всех кнопок которые закрывают контейнер, прописываешь атрибут class="menu-trigger-close"
Для всех элементов (которые и открывают и закрывают) прописываешь атрибут menu-id="id управляемого элемента".
Допустим для кнопки #menu-trigger-2 надо прописать "menu-id"="system-block-hid" и т.д.

В итоге ссылка для открытия первого блока будет выглядеть следующим образом:

<a href="#" id="menu-trigger-2" class="menu-trigger-open" menu-id="system-block-hid">Система ДПО ⬇</a>

А ссылка для закрытия первого блока так:

<a href="#" id="menu-trigger-a2" class="menu-trigger-close" menu-id="system-block-hid">⬆</a>

Теперь для каждого блока (который будет показываться) пропишем атрибут class="menu-container". Также к каждому блоку добавим атрибут со значением, которое будет определять отступ для информации ниже. В твоем коде эти значения указаны тут:

$( ".container" ).animate({
             bottom: "+=200", // Вот это число надо указать для соответствующего блока ( у каждого они свои)
}, 1000, function() {
            // Animation complete.
});

В итоге блок #system-block-hid получится таким:

<div id="system-block-hid" class="menu-container" animate-container="200" style="display: none;">
... тут содержимое
</div>

По аналогии пропиши каждому блоку свои значения.

Теперь тот код JS, который используется у тебя для открытия/закрытия блоков удали и вставь это:

$(document).ready(function(){
	function openContainer(menu, animateContainerVal) {
		$(".menu-container.open").each(function (idx, element) {
			let jElement = $(element);
			closeContainer(jElement, jElement.attr("animate-container"), false);
		});
		menu.slideDown(400, function() {
			menu.addClass("open");
			$(".container").animate({
				marginTop: animateContainerVal+"px"
			}, 1000, function(){
				// Animation complete
			});
		});
	}

	function closeContainer(menu, animateContainerVal, withAnimateContainer) {
		menu.slideUp(400, function(){
			menu.removeClass("open");
			if(withAnimateContainer) {
				$(".container").animate({
					marginTop: "0px"
				}, 1000, function(){
					// Animation complete
				});
			}
		});
	}
	
	$(".menu-trigger-open").click(function(e) {
		e.preventDefault();
		let menu = $("#"+$(this).attr("menu-id")),
		animateContainerVal = menu.attr("animate-container");
		if(menu.hasClass("open")) {
			closeContainer(menu, animateContainerVal, true);
		} else {
			openContainer(menu, animateContainerVal);
		}
	});

	$(".menu-trigger-close").click(function (e) {
		e.preventDefault();
		let menu = $("#"+$(this).attr("menu-id")),
		animateContainerVal = menu.attr("animate-container");
		closeContainer(menu, animateContainerVal, true);
	});
});

Answer 2

[MamaLuyba]

намудрили там, конечно, сверху. все проще:
каждому меню прописываешь один класс (например), ставишь этому классу display: none;
потом вешаешь на каждое меню функцию типа:

function show(elem) {
[...document.getElementsByClassName("menu")].forEach((e)=>{
 e.style.display  = 'none'; // тут ты скрываешь все меню
})
elem.style.display = 'block'; // тут раскрываешь нужное
}

html:
<div class='menu' onclick='show(this)'></div>

потом можно поиграться в css с анимацией и т.д.
если нужно плавное сворачивание, то вместо работы с display, играешься с height блока меню (от 0% до 100%), ну и transition не забудь.