Only one menu open at a time in the submenu

Hi Tom

I really do appreciate you taking another look at this! What you've just provided is sooo nearly there... It now closes sub-menus perfectly when another sub-menu is clicked. However, it doesn't work when a sub-menu has further sub-menus within it.
e.g
Click menu item
Click sub-menu to open it
Click another sub-menu to open it (first sub-menu now closes correctly thanks to your code).
Within that open sub-menu, open a 'sub-sub-menu'.
Within that same open sub-menu, open another 'sub-sub-menu'. The first sub-sub-menu still remains open.
Happy to provide a login for the site (it's still not public yet).

Within that same open sub-menu, open another ‘sub-sub-menu’. The first sub-sub-menu still remains open.

I think you lost me here. How do you open another sub-sub-menu without first opening another sub-menu?

Sorry Tom, here's a screenshot to help me explain...
https://ibb.co/Mcn2z3f
Here I've clicked on Resources, then Conservation, then UK. If I were to then click on Worldwide, the UK submenu would still stay open, and the Worldwide submenu would be overlaid on top of it.

Prior to the most recent code you kindly provided, If I clicked on Captivity or Media, all of the Conservation menus would also stay open, but that is now resolved. So the code you wrote works, but only one menu level deep.

Let's try this instead..

<script>
    jQuery( document ).ready( function( $ ) {
        $( '.main-navigation ul ul li.menu-item-has-children > a' ).on( 'click', function() {
            $( this ).closest( 'li' ).siblings().removeClass( 'sfHover' ).find( '.sub-menu' ).removeClass( 'toggled-on' );
        } );
    } );
</script>

Tom, you've nailed it! It behaves perfectly now. Thank you so much - first-class support :)

Awesome! Glad I could help :)

Hi Tom,

Just to second that thank you by Ben - wonderful support! Great solution, you guys rock! Thanks :)

Thanks! Glad I could help :)

Hi team,

I am trying to implement the same JS code that Tom provided:

It seems to only function when I have the navigation dropdown set to 'click - menu item'

I am using the hover setting instead as it is cleaner for the desktop part of my site..

My question is, how do I modify the JS code to function with "on hover" instead of the ".on( 'click'"

<script>
    jQuery( document ).ready( function( $ ) {
        $( '.main-navigation ul ul li.menu-item-has-children > a' ).on( 'click', function() {
            $( this ).closest( 'li' ).siblings().removeClass( 'sfHover' ).find( '.sub-menu' ).removeClass( 'toggled-on' );
        } );
    } );
</script>

Update: It seems to collapse the other menu items when the dropdown toggle arrow is selected...

What is the best way to make the entire item a clickable area?

Update: all sorted out, I modified the JS code...

It now collapses mobile sub menus on click

<script>
    jQuery( document ).ready( function( $ ) {
        $( '.main-navigation .main-nav > ul > li > a' ).on( 'click', function() {
            $( this ).closest( 'li' ).siblings().removeClass( 'sfHover' ).find( '.sub-menu' ).removeClass( 'toggled-on' );
        } );
    } );
				 
</script>

Glad to hear you got it working!