Clicking menu item with submenu opens all other sub menu's on mobile

user_19184687 0
Viewed 328

used below jquery function to add functionality to slide toggle the submenu of the menu items which has got children for the mobile viewport.

        $('.submenu-open').click(function(e) {
        $('.menu-item-has-children li').slideToggle('slow');
    });

But, it opens all the menu items with children at the same time (on mobile viewport), But it should only open the submenu of that menu item.

here is the link

wordpress navigation
2 Answers

While this may not be the exact solution, it is more on the line of what you need.

Vanilla JS, without JQuery: 

document.querySelectorAll('.submenu-open').addEventListener('click', function(event) {
    event.target.querySelector('.menu-item-has-children li').classList.toggle('slow');
})

Your problem ist, that you aren't adding the class to only the clicked element, but all of them.

user_72627390

Within the click event listener's callback function, you have to use jQuery's $(this) object to first off target the very .menu-item-has-children where the click event occurred.

Then use the method children() on that object to target the related unordered list .sub-menu:

$('.submenu-open').click(function(e) {
        $(this).children('.sub-menu').slideToggle('slow');
    });
})
user_85472140
Related