Как остановить toggleclass на родителя, когда ребенок li нажимается?

Question

Это мой HTML:

<ul id="menu-mobile" class="menu menu-sliding">
  <li>
    <a href="javascript:void(0);">Home</a></span>
  </li>
  <li class="has-children">
    <a href="javascript:void(0);">IT Solutions</a>
    <span class="menu-item-toggle"><span></span></span>
    <ul class="sub-menu">
      <li class="has-children">
        <a href="javascript:void(0);">IT Services</a>
        <span class="menu-item-toggle"><span></span></span>
        <ul class="sub-menu">
          <li><a href="javascript:void(0);">Managed IT</a></li>
          <li><a href="javascript:void(0);">IT Support</a></li>
          <li><a href="javascript:void(0);">IT Consultancy</a></li>
          <li><a href="javascript:void(0);">Cloud Computing</a></li>
          <li><a href="javascript:void(0);">Cyber Security</a></li>
          <li><a href="javascript:void(0);">Custom Software</a></li>
        </ul>
      </li>
      <li class="has-children">
        <a href="">Industries</a>
        <span class="menu-item-toggle"><span></span></span>
        <ul class="sub-menu">
          <li><a href="javascript:void(0);">Banking</a></li>
          <li><a href="javascript:void(0);">Capital Markets</a></li>
          <li><a href="javascript:void(0);">Enterprise Technology</a></li>
          <li><a href="javascript:void(0);">Manufacturing</a></li>
          <li><a href="javascript:void(0);">Healthcare</a></li>
          <li><a href="javascript:void(0);">Higher Education</a></li>
          <li><a href="javascript:void(0);">Logistics</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Это мой скрипт:

$('ul.menu li.has-children').on('click', function () {
  $(this).toggleClass('menu-expand').siblings().removeClass('menu-expand');
});

Вот как это выглядит:

Теперь проблема заключается в том, что когда я щелкаю вложенный класс li, то есть It Services / Industries .menu-expand, класс удаляется из родительского, то есть It Solutions, и весь блок переходит в состояние display:none.

Как это исправить?

Answer 1

Полагаю, вы можете изменить ключ, чтобы использовать его должным образом и покрывать его только для первого уровня li следующим образом:

$('ul.menu li.has-children a').on('click', function () {
  $(this).parent().toggleClass('menu-expand').siblings().removeClass('menu-expand');
});

Для правильной работы событие click передается в тег A и, соответственно, во внутреннее тело блока.

Надеюсь, это поможет.