- This topic has 26 replies, 2 voices, and was last updated 1 year, 3 months ago by David.
-
AuthorPosts
-
March 23, 2019 at 10:05 am #847613Ben
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).March 23, 2019 at 11:20 am #847667TomLead DeveloperLead DeveloperWithin 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?
March 23, 2019 at 12:10 pm #847682BenSorry 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.
March 23, 2019 at 4:41 pm #847826TomLead DeveloperLead DeveloperLet’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>
March 23, 2019 at 4:44 pm #847830BenTom, you’ve nailed it! It behaves perfectly now. Thank you so much – first-class support ๐
March 23, 2019 at 4:45 pm #847832TomLead DeveloperLead DeveloperAwesome! Glad I could help ๐
March 25, 2019 at 1:05 am #848791BobHi Tom,
Just to second that thank you by Ben – wonderful support! Great solution, you guys rock! Thanks ๐
March 25, 2019 at 8:59 am #849327TomLead DeveloperLead DeveloperThanks! Glad I could help ๐
January 20, 2023 at 1:34 am #2502496ChrisHi 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>
January 20, 2023 at 1:47 am #2502505ChrisUpdate: 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?
January 20, 2023 at 3:09 am #2502607ChrisUpdate: 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>
January 20, 2023 at 3:41 am #2502639DavidStaffCustomer SupportGlad to hear you got it working!
-
AuthorPosts
- You must be logged in to reply to this topic.