У меня есть оверлейное меню с 3 выпадающими меню.Добавить класс в одно выпадающее меню Удалить класс Из других
Когда вы нажимаете на один из родительских элементов, если у него есть раскрывающийся список, к нему добавляется класс, чтобы «активировать» раскрывающийся список, и он расширяется и отображается. В настоящее время он отлично работает, и при щелчке класс добавляется и удаляется, если его снова щелкнуть.
Проблема В настоящее время проблема заключается в том, что все выпадающие меню активны и открыты одновременно. Мне нужно, чтобы только один выпадающий список мог быть активным одновременно.
Если один выпадающий объект активен, и пользователь нажимает на другое, первоначальное активное раскрывающееся меню закрывается, и вновь щелкнувший становится активным.
Также, если раскрывающийся список активен, и пользователь снова нажимает на один и тот же родительский элемент, выпадающий список закрывается.
Текущий HTML
Я исключил все другие элементы списка для тех, которые имеют выпадающие исключением.
<ul class="header__overlay-nav">
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
After Action Review
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Overview
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Review Form
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Performance Card
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Downloads
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
100 Day Challenge App
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Desktop Wallpapers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Screen Savers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Forms
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Inspiration
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Get Your Mojo Working
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links href="#">
Game Changers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Bold Actions - Big Rewards
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Motivational Videos
</a>
</li>
</ul>
</li>
</ul>
Текущий Jquery
Вот оригинал Jquery я использовал, чтобы сделать основной переключатель активного класса, в основном только с помощью toggleClass на ребенка UL по щелкнул курок.
Прокомментировал, что я ранее пытался удалить все активные классы, а затем вместо переключения на элемент click, который я добавлял, но удаляя все классы, только чтобы добавить его в щелканный, было невозможно закрыть выпадающее меню снова нажмите один и тот же триггер.
var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');
var $overlayClasses = {
// Active css Class for dropdowns in Main Overlay
OverlayDdActive: 'dropdown--overlay-is-active',
ButtonIconIsRotated: 'btn__icon-is-rotated',
};
$overlayDdTrigger.on('click', function() {
if (_isMobile) {
// Attempt to to remove all active classes on UL's prevents dropdown from
// being able to close if the same trigger is clicked twice
// $('ul.dropdown--overlay-is-active').removeClass($overlayClasses.OverlayDdActive);
$(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);
}
});
Спасибо за помощь заранее, я знаю, что есть много вопросов, которые относятся к этой проблеме здесь, я сделал много поиска, но не мог найти, что бы помочь мне с этим конкретным случаем ,
В обработчик щелчка добавить это как первую строку '$ (+ $ overlayClasses.OverlayDdActive '') .removeClass ($ overlayClasses.OverlayDdActive);' – Tushar
@Tushar Спасибо за ответ, Isnt, что существенно то же самое, как моя прокомментированная строка кода? Он просто удаляет все текущие активные классы на странице. С этой строкой невозможно закрыть раскрывающийся список, дважды щелкнув один и тот же триггер. – VinceBrown
@ VinceBrown Трудно сказать, что вложенно в то, что в вашем HTML и классы слишком многословны. – zer00ne