Перед тем, как убрать у всех класс active
, занесём значение состояния кликнутого элемента в переменную. И потом проверим, если он был активным до убираения классов - то убираем активность, если не был - ставим
Трюк тут заключается именно в запоминании состояния ДО удаления класса active
со всех элементов
var ACTIVE = 'active';
$(".main-navigation > ul > li").on('click', function() {
let clickedElementIsActive = $(this).hasClass(ACTIVE);
$(".main-navigation > ul > li").removeClass(ACTIVE);
// Длинная версия
// clickedElementIsActive ? $(this).removeClass(ACTIVE): $(this).addClass(ACTIVE);
// Короткая версия
$(this).toggleClass(ACTIVE, !clickedElementIsActive);
});
ul {
list-style-type: none;
}
.maga-menu__list {
display: flex;
gap: 20px;
}
.sub-menu {
display: none;
}
.active .sub-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav class="main-navigation">
<ul class="maga-menu__list">
<li class="mega-menu__item">
<a>Пункт 1</a>
<ul class="sub-menu">
<li class="menu-item">
<a>Под пункт 1</a>
</li>
<li class="menu-item">
<a>Под пункт 2</a>
</li>
</ul>
</li>
<li class="mega-menu__item">
<a>Пункт 2</a>
<ul class="sub-menu">
<li class="menu-item">
<a>Под пункт 1</a>
</li>
<li class="menu-item">
<a>Под пункт 2</a>
</li>
</ul>
</li>
<li class="mega-menu__item">
<a>Пункт 3</a>
<ul class="sub-menu">
<li class="menu-item">
<a>Под пункт 1</a>
</li>
<li class="menu-item">
<a>Под пункт 2</a>
</li>
</ul>
</li>
</ul>
</nav>
toggleClass
. Не подошло? Если нет, что именно пошло не так?var ACTIVE = 'active'; $(".main-navigation > ul > li").on('click', function() { $(".main-navigation > ul > li").removeClass(ACTIVE); $(this).toggleClass(ACTIVE); });
не работает$(".main-navigation > ul > li").removeClass(ACTIVE);
перед$(this).toggleClass(ACTIVE);
var ACTIVE = 'active'; $(".main-navigation > ul > li").on('click', function() { $(this).toggleClass(ACTIVE); });
И тут возникает ошибка, оба подменю одновременно открываются, а так не должно быть