Как сделать чтобы при клике на другой пункт меню предыдущий блок закрывался и открывался следующий?

Question

[Ольга Жижка]

Помогите пожалуйста разобраться в создании мега меню.
Есть задача сделать соответствующее меню чтобы открывалось и закрывалось по клику на соответствующую ссылку в основном меню.
Сейчас у меня работает по клику, но как сделать, чтобы предыдущие открытые блоки закрывались.

$(function() {	
	$(".menu-main-item").click(function () {	
			var DataItem = $(this).attr('data-item'); 		
		$('#'+ DataItem).slideToggle( { duration: 400, easing: 'easeInOutCubic' } ); 
	});

});

.menu-main-item - ссылка в меню у которой есть data-item, у блока который открывается соответствующий id, и стиль - display: none;

Буду признательна, если кто поможет разобраться как решить эту проблему.

Answer 1

[Сергей delphinpro]

Например, так:

$(function() {
    var $items = $(".menu-main-item")
    var options = { duration: 400, easing: 'easeInOutCubic' };
    $items.on('click', function () {
        var DataItem = $(this).attr('data-item');
        var $current = $('#'+ DataItem)
        // Закроем все, кроме текущего
        $items.not($current).slideUp(options);
        // Переключим текущий
        $current.slideToggle(options);
    });
});

Answer 2

[Ольга Жижка]

Спасибо большое! Увидела что не добавила еще сам блок. С Вашей помощью работает вот так:

var $items = $(".menu-main-item");
	var $block = $(".menu-mega");
    var options = { duration: 400, easing: 'easeInOutCubic' };
    $items.on('click', function () {
        var DataItem = $(this).attr('data-item');
        var $current = $('#'+ DataItem);
        // Закроем все, кроме текущего
        $block.not($current).slideUp();
        // Переключим текущий
        $current.slideToggle();
    });

Благодарю!

C Вашей помощью получился вот такой код для мега меню, раскрывается по нажатию на соответствующую ссылку, по нажатию на другую область, в том числе body, сворачивается, и остается кликательным в открытом состоянии для перехода по ссылкам.

$(function() {		
	
	$(".styled").selectbox();
	
	var $items = $(".menu-main-item");
	var $block = $(".menu-mega");
    var options = { duration: 400, easing: 'easeInOutCubic' };
    $items.on('click', function () {
        var DataItem = $(this).attr('data-item');
        var $current = $('#'+ DataItem);
        $block.not($current).slideUp(options);
        $current.slideToggle(options);
		return (false);
    });
	$('body').click(function(){ $block.slideUp(options); });
	$block.click(function (e) { e.stopPropagation(); });
});

Еще раз спасибо за помощь!