[Resolved] Mobile menu toggle ALL

[JBD]

Is there a way to have the off canvas menu toggle “all” sub menu items, eg if a menu item is expanded (via “dropdown-menu-toggle” class click) then all currently open levels are closed. So only to have 1 level open at a time?

I can see ‘toggled-on’ is set in 3 places in \themes\generatepress\js\menu.js but I’m not sure which one to try to edit, and best way to edit this (using child theme).

Thanks, as always, for any pointers.
J

[Tom]

Hi there,

This might help: https://generatepress.com/forums/topic/slide-out-menu-close-sub-menu-items/#post-795721

Let me know 🙂

[JBD]

That looks perfect, however its not working for me yet.
I added hook element :

<script>
    var parentElementLinks = document.querySelectorAll( '.slideout-navigation .menu-item-has-children > a' );
	
    for ( var i = 0; i < parentElementLinks.length; i++ ) {
        parentElementLinks.addEventListener( 'click', function() {
            var _this = this;
		
            var openedSubMenus = _this.closest( 'nav' ).querySelectorAll( 'ul.toggled-on' );
		
            if ( openedSubMenus && ! _this.closest( 'ul' ).classList.contains( 'toggled-on' ) && ! _this.closest( 'li' ).classList.contains( 'sfHover' ) ) {
                for ( var o = 0; o < openedSubMenus.length; o++ ) {
                    openedSubMenus[o].classList.remove( 'toggled-on' );
                    openedSubMenus[o].closest( 'li' ).classList.remove( 'sfHover' );
                }
            }
        }, true );
    }
</script>

but in the console I’m getting
(index):10 Uncaught TypeError: parentElementLinks.addEventListener is not a function

[JBD]

OK, fixed it. Had to add [ i ], eg change to

parentElementLinks[ i ].addEventListener( ‘click’, function() {

(without the spaces, as I cant seem to add the code without a space after the square bracket?)

Working fine now, many thanks.
J

[Tom]

No problem 🙂

[Author]

Posts