Многоуровневое меню JQuery

Question

Есть многоуровневое меню, второе меню открывается по клику на menu-first --clickable пункт 2.
Проблема в том, что когда происходит клик на menu-second --clickable, открывается третье меню, но первое закрывается((
Второе и третье меню располагаются горизонтально друг за другом)

Подайте идею как исправить

$(function() {
  $('.--clickable').click(function(event) {
    event.preventDefault();
    $(this).children('ul').toggleClass('--active');
  });
});

li>ul {
  display: none;
}

li>ul.--active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu-first">
  <li class="menu-first__link"><a href="">Пункт 1</a></li>
  <li class="menu-first__link --clickable"><a href="">Пункт 2</a>
    <ul class="menu-second">
      <li class="menu-second__link"><a href="">Ссылка 1</a></li>
      <li class="menu-second__link"><a href="">Ссылка 2</a></li>
      <li class="menu-second__link --clickable"><a href="">Ссылка 3</a>

        <ul class="menu-third">
          <li class="menu-third__link"><a href="">Товар 1</a></li>
          <li class="menu-third__link"><a href="">Товар 2</a></li>
          <li class="menu-third__link"><a href="">Товар 3</a></li>
          <li class="menu-third__link"><a href="">Товар 4</a></li>
        </ul>

      </li>
      <li class="menu-second__link"><a href="">Ссылка 4</a></li>
    </ul>

  </li>
  <li class="menu-first__link"><a href="">Пункт 3</a></li>
  <li class="menu-first__link"><a href="">Пункт 4</a></li>
</ul>

Answer 1

Метод click у вас обрабатывал весь ul и любой клик внутри по любому элементу.

Сейчас метод срабатывает только при клике по ссылке внутри .--clickable

$(function() {
  $('.--clickable>a').click(function(event) {
    event.preventDefault();

    $(this).next('ul').toggleClass('--active');
  });
});

li>ul {
  display: none;
}

li>ul.--active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu-first">
  <li class="menu-first__link"><a href="">Пункт 1</a></li>
  <li class="menu-first__link --clickable"><a href="">Пункт 2</a>
    <ul class="menu-second">
      <li class="menu-second__link"><a href="">Ссылка 1</a></li>
      <li class="menu-second__link"><a href="">Ссылка 2</a></li>
      <li class="menu-second__link --clickable"><a href="">Ссылка 3</a>

        <ul class="menu-third">
          <li class="menu-third__link"><a href="">Товар 1</a></li>
          <li class="menu-third__link"><a href="">Товар 2</a></li>
          <li class="menu-third__link"><a href="">Товар 3</a></li>
          <li class="menu-third__link"><a href="">Товар 4</a></li>
        </ul>

      </li>
      <li class="menu-second__link"><a href="">Ссылка 4</a></li>
    </ul>

  </li>
  <li class="menu-first__link"><a href="">Пункт 3</a></li>
  <li class="menu-first__link"><a href="">Пункт 4</a></li>
</ul>

БЛОГ НА HUSL

Многоуровневое меню JQuery

Ответы (1 шт):