CODEWITHSUNDEEP
javascriptjquerywordpressdrop-down-menu
wordpressdev_meg
wordpressdev_meg

Reputation: 143

jQuery issue with WordPress Sub Menu

Wondering if anyone can help, please.

I've got some jQuery setup for my sub-menu in WordPress. It works perfectly until I have a sub-menu within a sub-menu. The classes don't change in WordPress so the jQuery no longer works.

Here's my 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);
    }
});

Here's an example of how WordPress outputs the menu code:

<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>

Any ideas of how to amend my code? Currently when I click the item within the two sub-menu then the parent sub-menu closes.

Upvotes: 1

Views: 38

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Try with this simplified handler:

$('.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>

Upvotes: 1

Related Questions