0

var ACTIVE = 'active';
$(".main-navigation > ul > li").on('click', function() {
  $(".main-navigation > ul > li").removeClass(ACTIVE);
  $(this).addClass(ACTIVE);
});
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>

5
  • Я же вам сказал попробовать toggleClass. Не подошло? Если нет, что именно пошло не так?
    – EzioMercer
    Commented 4 июл. 2022 в 13:19
  • @EzioMercer ему надо два в одном: 1 - toggle при клике на один и тот же пункт, 2- закрытие всех и открытие кликнутого. Если просто сделать toggleClass - не сработает, т.к. удаляется везде вначале класс Commented 4 июл. 2022 в 13:21
  • var ACTIVE = 'active'; $(".main-navigation > ul > li").on('click', function() { $(".main-navigation > ul > li").removeClass(ACTIVE); $(this).toggleClass(ACTIVE); }); не работает
    – user324184
    Commented 4 июл. 2022 в 13:21
  • @КонстантинЖевжик не работает, потому что там не нужен $(".main-navigation > ul > li").removeClass(ACTIVE); перед $(this).toggleClass(ACTIVE);
    – Simon
    Commented 4 июл. 2022 в 13:24
  • var ACTIVE = 'active'; $(".main-navigation > ul > li").on('click', function() { $(this).toggleClass(ACTIVE); }); И тут возникает ошибка, оба подменю одновременно открываются, а так не должно быть
    – user324184
    Commented 4 июл. 2022 в 13:27

1 ответ 1

1

Перед тем, как убрать у всех класс 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>

5
  • clickedElementIsActive можно передать в toggleClass :)
    – EzioMercer
    Commented 4 июл. 2022 в 13:33
  • 1
    Точно, постоянно забываю эту шнягу Commented 4 июл. 2022 в 13:33
  • ....Добавил.... Commented 4 июл. 2022 в 13:35
  • Спасибо :))))))
    – EzioMercer
    Commented 4 июл. 2022 в 13:36
  • Спасибо! Спасли просто)
    – user324184
    Commented 4 июл. 2022 в 14:09

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.