Archived topic
Mobile menu toggle ALL
4 replies · Started by JBD on October 7, 2019
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
Hi there,
This might help: https://generatepress.com/forums/topic/slide-out-menu-close-sub-menu-items/#post-795721
Let me know :)
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
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
No problem :)
