jQuery: Как получить подменю, чтобы они оставались открытыми при нажатии на подменю

Question

Кажется, уже есть несколько тем, связанных с этим, но ни один из их ответов, кажется, не работает для меня.

Итак, я создаю тему Wordpress и хочу, чтобы у нее была возможностьиметь подменю и под-подменю и т. д. Итак, я получаю структуру меню, примерно такую:

<ul id="menu-main-navigation-menu" class="menu">
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item current_page_item"><a href="" aria-current="page">Home</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Products</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="">Services</a>
    <ul class="sub-menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Basic</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Intermediate</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="">Advanced</a>
        <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Advanced Service 1</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Advanced Service 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Итак, у li, у которых есть дочерние ul, есть класс "menu-item-has-children ", что является их единственной отличительной чертой от всех других li.

Теперь в jQuery я пробовал это:

jQuery(document).on('click','.menu-item-has-children',function(){
  jQuery(this).toggleClass('active');
});

Но проблема в том, что когда янажмите на «.menu-item-has-children», который находится внутри «.menu-item-has-children», я эффективно нажимаю на оба сразу, так что под-подменю получает класс «.active"добавлен в него и открывается как надо, но его родительское подменю теряет свой класс" .active ", тем самым сворачивая оба.

Моя цель состоит в том, чтобы каждый раз, когда я нажимал на подменю, еслиона закрыта, то она должна открыться, или, если она открыта, она должна закрыться.Каждый раз, когда я нажимаю на подменю, оно должно открываться и закрываться соответственно, но его родительское подменю должно оставаться открытым.Это также должно работать для под-под-подменю и под-под-под-под-подменю и т. Д. ... поэтому мне действительно нужно универсальное решение, которое будет работать независимо от того, насколько глубоко вложенное подменю.

Answer 1

Ознакомьтесь с документацией для event.stopPropagation(). На базовом уровне это предотвращает "всплывание" текущего события через родительские элементы. Вот супер элементарный пример, основанный на предоставленных вами фрагментах.

Вы также можете добавить другие проверки в ваш обработчик кликов, например, определить, есть ли у элемента класс или дочерние элементы, но на базовом уровне проще всего остановить распространение через родительские элементы.

jQuery(document).on('click', '.menu-item-has-children', function(e){
  e.stopPropagation();
  jQuery(this).toggleClass('active');  
});

.menu > li {
  display: block;
}

.sub-menu {
  display: none;
}

.active > .sub-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main-navigation-menu" class="menu">
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item current_page_item"><a href="#" aria-current="page">Home</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Products</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="#">Services</a>
    <ul class="sub-menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Basic</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Intermediate</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="#">Advanced</a>
        <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Advanced Service 1</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Advanced Service 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>