Как правильно организовать выпадающее меню?

Question

[gcj]

Приветствую, взгляните пожалуйста на следующее меню: jsfiddle.net/zzw8ufav/4
Задача:
1. Сделать так, чтобы при клике за пределами выпадающего меню - она закрывалась.
2. Сделать так, чтобы при клике на любые другие пункты меню - открывалась та менюшка, на которую клацаем, а предыдущая теряла активность.
Ну и соответственно, активному пункту должен присваиваться класс active.

Товарищи гуру, помогите с этим нелегким делом, плс) буду безмерно благодарен.

Answer 1

[Wheelie]

jsfiddle.net/04uzq2st

Ну как-то так, можно и лучше =)

Comments

[gcj]

спасибо.
но элементы то не теряют активность(
нажимаем на меню, закрываем - но пункт всё равно остается активным (подчеркнутым, если угодно)

[Wheelie]

gcj: jsfiddle.net/04uzq2st/1 гляньте тут. А во вторых, даже если бы не терял, почитайте внимательно, что там написано и будет понятно, что и за что отвечает и допишите до ваших потребностей.

[gcj]

Wheelie: спасибо большое) я не силен в js, без вас не осилил бы

[gcj]

Wheelie: и еще момент, если выпадающее меню абсолютно позиционировано, то при нажатии на элементы под ним (ну, скажем, на любую точку сайта) меню не закрывается.
как можно исправить этот момент?

[Wheelie]

gcj: stackoverflow.com/questions/12661797/jquery-click-... тут хорошие примеры. Если не работает, дело уже в верстке.

[gcj]

Wheelie: окей, спасибо еще раз! спасаете

Answer 2

[DireX]

И один и второй пример как по мне подойдут только для статического сайта. Советую использовать атрибут data и в нем задавать нужные div\ul, так не нужно будет при добавлении новых пунктов переписывать JS

Вот пример:
codepen.io/anon/pen/eJNRmo