Блог

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

Это мой html

 lt;div class="navbar"gt;  lt;div class="nav_item"gt;  lt;div class="dropdown menu_item" gt;  lt;span class="navbar-submenu"gt; lt;a href="/"gt;dropdownlt;/agt;lt;/spangt;  lt;div class="secondarynav" gt;  lt;div class="nav_item"gt;  lt;div class="menu_item" gt;  lt;a href="/#"gt;linklt;/agt;  lt;/divgt;  lt;/divgt;  lt;div class="nav_item"gt;  lt;div class="menu_item" gt;  lt;a href="/#"gt;linklt;/agt;  lt;/divgt;  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;/divgt;  lt;div class="nav_item"gt;  lt;div class="menu_item" gt;  lt;a href="/"gt;linklt;/agt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

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

 $('.dropdown').click(function (e) {  $(this).closest('.nav_item').toggleClass('active'); });  

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

Я пробовал различные другие методы

 $('.nav_item.active gt; *').click(function(e) {  $(this).closest('.active').removeClass('active'); });  

Но это приводит к сбоям с функцией переключения в другом scipt. В основном активное добавляется, а затем сразу удаляется.

Как я могу установить это так, когда .щелкается раскрывающийся список .активный добавляется в родительский элемент nav_item. Но тогда, если щелкнуть по какой-либо ссылке в этом меню,. active будет удален? Спасибо

Используйте e.stopPropagation() для предотвращения появления события на элементе в раскрывающемся списке.

 $('.nav_item.active gt; *').click(function(e) {  e.stopPropagation();  $(this).closest('.active').removeClass('active'); });