JQuery работает не так, как нужно

Question

$(document).ready(function() {
  $(".menu-item").click(function() {
    $(".menu-item .sub-menu")
      .not($(this).closest(".menu-item").children(".sub-menu"))
      .slideUp("slow");
    $(this).children(".sub-menu").slideToggle("slow");
  });
});

$('.menu li:has(ul)').addClass('has-child');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="mobile-Menu" class="menu">
  <li id="menu-item-71" class="menu-item menu-item-active has-child"><a href="" aria-current="page">Главная</a>
    <ul class="sub-menu" style="">
      <li id="menu-item-102" class="menu-item"><a href="">Мой аккаунт</a></li>
    </ul>
  </li>
  <li id="menu-item-112" class="menu-item"><a href="">О Компании</a></li>
  <li id="menu-item-75" class="menu-item has-child"><a href="#">Услуги</a>
    <ul class="sub-menu" style="display: block;">
      <li id="menu-item-525" class="menu-item has-child"><a href="#">Ремонт и отделка</a>
        <ul class="sub-menu" style="display: none;">
          <li id="menu-item-526" class="menu-item"><a href="#">Декор интерьера</a></li>
          <li id="menu-item-527" class="menu-item"><a href="#">Ремонт коттеджей</a></li>
          <li id="menu-item-531" class="menu-item"><a href="#">Ремонт квартир</a></li>
          <li id="menu-item-529" class="menu-item"><a href="#">Ремонт ресторанов и кафе</a></li>
          <li id="menu-item-532" class="menu-item"><a href="#">Ремонт офисов</a></li>
          <li id="menu-item-534" class="menu-item"><a href="#">Ремонт магазинов</a></li>
          <li id="menu-item-533" class="menu-item"><a href="#">Ремонт помещений</a></li>
          <li id="menu-item-528" class="menu-item"><a href="#">Цены на ремонт</a></li>
          <li id="menu-item-530" class="menu-item"><a href="#">Элемент меню</a></li>
          <li id="menu-item-77" class="menu-item"><a href="#">Контакты</a></li>
        </ul>
      </li>
      <li id="menu-item-535" class="menu-item has-child"><a href="#">Паркетные работы</a>
        <ul class="sub-menu" style="">
          <li id="menu-item-538" class="menu-item"><a href="#">Укладка паркета</a></li>
          <li id="menu-item-536" class="menu-item"><a href="#">Шлифовка паркета</a></li>
          <li id="menu-item-539" class="menu-item"><a href="#">Лакировка паркета</a></li>
          <li id="menu-item-537" class="menu-item"><a href="#">Покрытие маслом</a></li>
          <li id="menu-item-541" class="menu-item"><a href="#">Тонировка паркета</a></li>
          <li id="menu-item-542" class="menu-item"><a href="#">Реставрация паркета</a></li>
          <li id="menu-item-540" class="menu-item"><a href="#">Установка плинтусов</a></li>
          <li id="menu-item-544" class="menu-item"><a href="#">Уход за паркетом</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li id="menu-item-74" class="menu-item"><a href="#">Продукция</a></li>
  <li id="menu-item-72" class="menu-item has-child"><a href="">Магазин</a>
    <ul class="sub-menu" style="">
      <li id="menu-item-543" class="menu-item has-child"><a href="#">Напольные покрытия</a>
        <ul class="sub-menu" style="">
          <li id="menu-item-552" class="menu-item"><a href="#">Инженерная доска</a></li>
          <li id="menu-item-548" class="menu-item"><a href="#">Паркетная доска</a></li>
          <li id="menu-item-549" class="menu-item"><a href="#">Модульный паркет</a></li>
          <li id="menu-item-545" class="menu-item"><a href="#">Розетки</a></li>
          <li id="menu-item-547" class="menu-item"><a href="#">Бордюры</a></li>
          <li id="menu-item-550" class="menu-item"><a href="#">Декоры</a></li>
          <li id="menu-item-551" class="menu-item"><a href="#">Ламинат</a></li>
        </ul>
      </li>
      <li id="menu-item-546" class="menu-item has-child"><a href="#">Столярные изделия</a>
        <ul class="sub-menu" style="">
          <li id="menu-item-553" class="menu-item"><a href="#">Элемент меню</a></li>
          <li id="menu-item-554" class="menu-item"><a href="#">Элемент меню</a></li>
          <li id="menu-item-556" class="menu-item"><a href="http://3##">Элемент меню</a></li>
        </ul>
      </li>
      <li id="menu-item-555" class="menu-item has-child"><a href="#">Пиломатериалы</a>
        <ul class="sub-menu" style="">
          <li id="menu-item-559" class="menu-item"><a href="#">Обрезная доска</a></li>
          <li id="menu-item-563" class="menu-item"><a href="#">Ламель</a></li>
          <li id="menu-item-561" class="menu-item"><a href="#">Террасная доска</a></li>
          <li id="menu-item-560" class="menu-item"><a href="#">Строганная доска</a></li>
          <li id="menu-item-565" class="menu-item"><a href="#">Палубная доска</a></li>
          <li id="menu-item-557" class="menu-item"><a href="#">Вагонка штиль</a></li>
          <li id="menu-item-558" class="menu-item"><a href="#">Имитация бруса</a></li>
          <li id="menu-item-562" class="menu-item"><a href="#">Блок хаус</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li id="menu-item-76" class="menu-item has-child"><a href="#">Портфолио</a>
    <ul class="sub-menu" style="">
      <li id="menu-item-564" class="menu-item"><a href="#">Дизайн проектов</a></li>
      <li id="menu-item-566" class="menu-item"><a href="#">Паркетные работы</a></li>
      <li id="menu-item-567" class="menu-item"><a href="#">Ремонтные работы</a></li>
    </ul>
  </li>
  <li id="menu-item-568" class="menu-item"><a href="#">Контакты</a></li>
</ul>

3-ий уровень должен открываться так же, как открывается 2. Почему 3-ий уровень подменю при открытии открывается и в тот же миг закрывается? Сейчас стоит вот такой код:

$('ul .menu-item').click(function(event) {
  $(this).children('.sub-menu').slideToggle();   
    return false;
});

Но при открытии одного подменю первого уровня не закрывается другое подменю этого же уровня, то есть когда открыто одно подменю, при открытии другого подменю этого же уровня то не закрывается предыдущее

Answer 1

Так как у Вас одинаковый обработчик на все пункты, то нажатие на вложенный пункт приводит к тому, что всплывающее событие попутно запускается и на всех родительских элементах.

Чтобы такого не происходило необходимо: либо назначать разные обработчики для разных уровней вложенности, либо прерывать всплытие события с помощью stopPropagation().

$(document).ready(function () {
  $(".menu li:has(ul)").addClass("has-child").on("click", function (ev) {
    ev.stopPropagation();
    $(".has-child").not(this).not($(this).parents(".has-child")).removeClass("menu-item-active").children(".sub-menu").slideUp("slow");
    $(this).toggleClass("menu-item-active").children(".sub-menu").slideToggle("slow");
  });
  $(".menu li:not(.has-child)").on("click", function (ev) {
    ev.stopPropagation();
    console.clear(); console.log(this.textContent);
  });
});

.sub-menu { display: none; }

li { position: relative; background-color: #fa04; list-style-type: none; }
li.has-child::before { content: "⇓"; position: absolute; transform: translatex(-130%) rotate(-90deg); transition: .5s ease; }
li.menu-item-active::before { transform: translatex(-130%) rotate(315deg); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="mobile-Menu" class="menu">
  <li id="menu-item-71" class="menu-item"><a href="#" aria-current="page">Главная</a>
    <ul class="sub-menu">
      <li id="menu-item-102" class="menu-item"><a href="#">Мой аккаунт</a></li>
    </ul>
  </li>
  <li id="menu-item-112" class="menu-item"><a href="#">О Компании</a></li>
  <li id="menu-item-75" class="menu-item"><a href="#">Услуги</a>
    <ul class="sub-menu">
      <li id="menu-item-525" class="menu-item"><a href="#">Ремонт и отделка</a>
        <ul class="sub-menu">
          <li id="menu-item-526" class="menu-item"><a href="#">Декор интерьера</a></li>
          <li id="menu-item-527" class="menu-item"><a href="#">Ремонт коттеджей</a></li>
          <li id="menu-item-531" class="menu-item"><a href="#">Ремонт квартир</a></li>
          <li id="menu-item-529" class="menu-item"><a href="#">Ремонт ресторанов и кафе</a></li>
          <li id="menu-item-532" class="menu-item"><a href="#">Ремонт офисов</a></li>
          <li id="menu-item-534" class="menu-item"><a href="#">Ремонт магазинов</a></li>
          <li id="menu-item-533" class="menu-item"><a href="#">Ремонт помещений</a></li>
          <li id="menu-item-528" class="menu-item"><a href="#">Цены на ремонт</a></li>
          <li id="menu-item-530" class="menu-item"><a href="#">Элемент меню</a></li>
          <li id="menu-item-77" class="menu-item"><a href="#">Контакты</a></li>
        </ul>
      </li>
      <li id="menu-item-535" class="menu-item"><a href="#">Паркетные работы</a>
        <ul class="sub-menu">
          <li id="menu-item-538" class="menu-item"><a href="#">Укладка паркета</a></li>
          <li id="menu-item-536" class="menu-item"><a href="#">Шлифовка паркета</a></li>
          <li id="menu-item-539" class="menu-item"><a href="#">Лакировка паркета</a></li>
          <li id="menu-item-537" class="menu-item"><a href="#">Покрытие маслом</a></li>
          <li id="menu-item-541" class="menu-item"><a href="#">Тонировка паркета</a></li>
          <li id="menu-item-542" class="menu-item"><a href="#">Реставрация паркета</a></li>
          <li id="menu-item-540" class="menu-item"><a href="#">Установка плинтусов</a></li>
          <li id="menu-item-544" class="menu-item"><a href="#">Уход за паркетом</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li id="menu-item-74" class="menu-item"><a href="#">Продукция</a></li>
  <li id="menu-item-72" class="menu-item"><a href="#">Магазин</a>
    <ul class="sub-menu">
      <li id="menu-item-543" class="menu-item"><a href="#">Напольные покрытия</a>
        <ul class="sub-menu">
          <li id="menu-item-552" class="menu-item"><a href="#">Инженерная доска</a></li>
          <li id="menu-item-548" class="menu-item"><a href="#">Паркетная доска</a></li>
          <li id="menu-item-549" class="menu-item"><a href="#">Модульный паркет</a></li>
          <li id="menu-item-545" class="menu-item"><a href="#">Розетки</a></li>
          <li id="menu-item-547" class="menu-item"><a href="#">Бордюры</a></li>
          <li id="menu-item-550" class="menu-item"><a href="#">Декоры</a></li>
          <li id="menu-item-551" class="menu-item"><a href="#">Ламинат</a></li>
        </ul>
      </li>
      <li id="menu-item-546" class="menu-item"><a href="#">Столярные изделия</a>
        <ul class="sub-menu">
          <li id="menu-item-553" class="menu-item"><a href="#">Элемент меню</a></li>
          <li id="menu-item-554" class="menu-item"><a href="#">Элемент меню</a></li>
          <li id="menu-item-556" class="menu-item"><a href="#">Элемент меню</a></li>
        </ul>
      </li>
      <li id="menu-item-555" class="menu-item"><a href="#">Пиломатериалы</a>
        <ul class="sub-menu">
          <li id="menu-item-559" class="menu-item"><a href="#">Обрезная доска</a></li>
          <li id="menu-item-563" class="menu-item"><a href="#">Ламель</a></li>
          <li id="menu-item-561" class="menu-item"><a href="#">Террасная доска</a></li>
          <li id="menu-item-560" class="menu-item"><a href="#">Строганная доска</a></li>
          <li id="menu-item-565" class="menu-item"><a href="#">Палубная доска</a></li>
          <li id="menu-item-557" class="menu-item"><a href="#">Вагонка штиль</a></li>
          <li id="menu-item-558" class="menu-item"><a href="#">Имитация бруса</a></li>
          <li id="menu-item-562" class="menu-item"><a href="#">Блок хаус</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li id="menu-item-76" class="menu-item"><a href="#">Портфолио</a>
    <ul class="sub-menu">
      <li id="menu-item-564" class="menu-item"><a href="#">Дизайн проектов</a></li>
      <li id="menu-item-566" class="menu-item"><a href="#">Паркетные работы</a></li>
      <li id="menu-item-567" class="menu-item"><a href="#">Ремонтные работы</a></li>
    </ul>
  </li>
  <li id="menu-item-568" class="menu-item"><a href="#">Контакты</a></li>
</ul>

БЛОГ НА HUSL

JQuery работает не так, как нужно

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