jQuery проблема с подменю WordPress

Question

Хотите знать, если кто-нибудь может помочь, пожалуйста.

У меня есть некоторые настройки jQuery для моего подменю в WordPress. Это работает отлично, пока у меня нет подменю в подменю. Классы не изменяются в WordPress, поэтому jQuery больше не работает.

Вот мой jQuery:

$('.mobile li > .sub-menu').parent().click(function() {
    $(".sub-menu").slideUp();
    var submenu = $(this).children('.sub-menu');

    if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
    } else {
        $(submenu).slideUp(200);
    }
});

Вот пример того, как WordPress выводит код меню:

<ul id="menu-main-menu" class="mobile">
  <li> 
   <a href="#">Item</a>
     <ul class="sub-menu">
       <li>
         <a href="#">Item</a>
           <ul class="sub-menu">
             <li>
               <a href="#">Item</a>
             </li>
           </ul>
       </li>
     </ul>
  </li> 
</ul>

Есть идеи, как изменить мой код? В настоящее время, когда я щелкаю элемент в двух подменю, родительское подменю закрывается.

Answer 1

Попробуйте с этим упрощенным обработчиком:

$('.mobile li > a').click(function() {
    $(this).siblings('.sub-menu').slideToggle(200);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main-menu" class="mobile">
  <li> 
   <a href="#">Item</a>
     <ul class="sub-menu">
       <li>
         <a href="#">Item</a>
           <ul class="sub-menu">
             <li>
               <a href="#">Item</a>
             </li>
           </ul>
       </li>
     </ul>
  </li> 
</ul>