Search code examples
jquerywordpressdropdown

Jquery script on a multilevel menu, activate one sub menu at a time

I created my first multilevel menu that you will find attached, the intention is to implement it in wordpress. I state that I am an absolute novice of jquery, but so far my limited skills have been enough for me. But now I find myself facing a limit, that is to say I used the following script

$( ".fa-angle-down" ).on('click', function() { $(".sub-menu").toggleClass("expand-ul"); });

but it doesn't work as I would like. In fact, I would like only one .sub-menu (ul) to be activated at a time when I click on an arrow (.fa-angle-down), but when using this script I activate all the submenus . I tried them all but I can't deal with them. I leave you all the code, this is someone who can help me understand. Thanks so much.

codepen my menu and the whole code

Solution

  • you are expanding all elements with class .sub-menu

    You need to limit it to the next one using:

    $( ".fa-angle-down" ).on('click', function() {
 $(this).parent().next('.sub-menu').toggleClass("expand-ul");
});