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

<!DOCTYPE html>
02
<html lang="en">
03
<head>
04
  <meta charset="UTF-8">
05
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
06
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
07
  <title>Document</title>
08
</head>
09
<body>
10
  <ul class="menu-first">
11
    <li class="menu-first__link"><a href="">Пункт 1</a></li>
12
    <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>
</body>
</html>



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

 

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

0 ответов

Другие вопросы по тегам