Как сделать выпадание и скрытие меню по клику на jquery?

Question

[nikkon82]

День добрый!
Как сделать выпадающее меню по клику на jquery? (Показ и скрытие)
В меню есть две категории с подкатегориями.

При нажатии на меню - показ подменю и скрытие (если было открыто - другое подменю)
При нажатии на это же меню (или на другое) - скрытие.

В JS не силен
Сделал так:

$('.super-menu > li').click(function () {
			$('.menu-wrap', this).css('display','block');
			$('.dr-down-menu-overlay').css('display','block');
		});

Выпадает, но не скрывается, если повторно написать этот же код только с display: none

Answer 1

[Stalker_RED]

$('.foo').on('click', function(){
  $('.bar').toggleClass('active')
})

Comments

[nikkon82]

почему-то после добавления active перезагружается страница и active сбрасывается

[Дима Долготер]

nikkon82, href пустой

[nikkon82]

SpiderPigAndCat, точно - спасибо, там просто было javascript - и с этим не добавляется active

[nikkon82]

если href убираю то active не добавляется

[Stalker_RED]

nikkon82, вы не показали разметку.
Если ссылка не должна срабатывать, то может и не нужно эти пункты делать ссылками?

В крайнем случае можно делать preventDefault.

[nikkon82]

да спасибо, там перед div который должен открыться еще ссылка - убрал ссылку и все заработало

Answer 2

[iBird Rose]

$('.super-menu > li').click(function () {
	var parent = $(this).parents('.super-menu');

	if (parent.hasClass('open')) {
		$('.menu-wrap', this).css('display','none');
		$('.dr-down-menu-overlay').css('display','none');
		parent.removeClass('open');
	} else {
		$('.menu-wrap', this).css('display','block');
		$('.dr-down-menu-overlay').css('display','block');
		parent.addClass('open');
	}
});

Comments

[nikkon82]

не срабатывает, class open не добавляется

[iBird Rose]

nikkon82, ну значит экспериментируй с переменной parent.
Сам структуру не скинул. Так что давай сам

[nikkon82]

<ul class="super-menu">
 <li id="main-menu-item-1">
  <div class="menu-wrap"><div>
</li>
<li id="main-menu-item-2">
  <div class="menu-wrap"><div>
</li>
</ul>

[iBird Rose]

nikkon82, https://jsfiddle.net/h01qywnf/

[nikkon82]

iBird Rose, не работает - класс не добавляется и открытое меню при нажатии на другое не закрывается

[iBird Rose]

nikkon82, я пример скинул - у меня все работает.

[nikkon82]

даже в примере не работает так как нужно