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

        $('.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, But it should only open the submenu of that menu item.

here is the link

CodePudding user response：

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.

CodePudding user response：

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() method on that object to target the related unordered list .sub-menu:

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