Archived topic
Slidout menu collapse on dropdown click
5 replies · Started by Christine on April 4, 2020
Hi,
In my website I would lke to have a functionality on mobile slide out menu like if I click the one drop down section it opens, when I click on second/any other drop down the previously opened dropdown should get collapsed.
Please let me know how we can do it. This is for your reference. https://prnt.sc/rst7hj
Regards
Hi there,
Can you try this?
https://generatepress.com/forums/topic/only-one-menu-open-at-a-time-in-the-submenu/page/2/#post-847826
It can be added using the wp_footer hook in a hook element:
https://docs.generatepress.com/article/hooks-element-overview/
Hi Leo, Thank you for your response. I have added this code in my website but i cannot see the difference. I have added as a hook in wp_head.
<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>
We are clicking on the arrow and checking this. If I click on Parent sub menu item then we will be redirected to a different page so we don't need it there.
Please visit blissfulweddingfeet.com.au/ and check by yourself once.
Thanks
Can you try this instead?:
<script>
jQuery( document ).ready( function( $ ) {
$( '.main-navigation ul ul li.menu-item-has-children > a > .dropdown-menu-toggle' ).on( 'click', function() {
$( this ).closest( 'li' ).siblings().removeClass( 'sfHover' ).find( '.sub-menu' ).removeClass( 'toggled-on' );
} );
} );
</script>Hey This worked... Thanks....
No problem!
