Как задать фон первому элементу меню?

Question

[Петр Сергеев]

ЗАДАЧА:
1) Сделать так, чтобы при клике по какому-либо пункту в МЕНЮ или подМЕНЮ фон данного элемента поменялся.
2) При клике по какому-либо пункту МЕНЮ, первый пункт его подМЕНЮ должен также изменить фон
3) При загрузке страницы первый пункт МЕНЮ и первый пункт подМЕНЮ должны также изменить фон

Я все это сделал, но возникла проблема в том, что при клике по какому-либо элементу подМЕНЮ, первый, элемент который задавался по умолчанию не сбрасывает стиль

Вот код
как я понимаю проблема на 29 строке в js
https://jsfiddle.net/js4f60eb/

А вот проблема в более наглядном виде

Answer 1

[0xD34F]

проблема в том, что при клике по какому-либо элементу подМЕНЮ, первый, элемент который задавался по умолчанию не сбрасывает стиль

Всё-таки стиль сбрасывается. А потом снова устанавливается. Потому что из-за всплытия события срабатывает обработчик клика основного меню. Отменяйте всплытие в обработчике клика подменю, и всё будет OK:

$('ul#topnav li span a').click(function(e) {
  e.stopPropagation();
  ...

Comments

[Петр Сергеев]

Огромное спасибо, сам бы не додумался, хотя по иронии судьбы где-то месяц назад изучал всплытия событий. Очевидно плохо))
Ну а вообще, нормально ли считается такое меню или можно было бы его сделать с меньшим js-кодом и мой пример скорее костыли нежели боевое решение?
Как бы вы сделали его?

Answer 2

[Юпитер Макс]

так не хочется разбираться ))) Используйте логику "ели тут так, то вот тут должно быть так" )))

Answer 3

[lukoie]

При клике на субменю(у них же есть свой класс) удалять со всех субменю(с таким же классом) класс .active и добавлять к тому, на который кликнули.