Twenty Fifteen: Change navigation menu behavior
This is the JS code responsible for the main navigation menu in the Twenty Fifteen theme:
function initMainNavigation( container ) {
// Add dropdown toggle that display child menu items.
container.find( '.menu-item-has-children a' ).after( 'button class="dropdown-toggle" aria-expanded="false"' + screenReaderText.expand + '/button' );
// Toggle buttons and submenu items with active children menu items.
container.find( '.current-menu-ancestor button' ).addClass( 'toggle-on' );
container.find( '.current-menu-ancestor .sub-menu' ).addClass( 'toggled-on' );
container.find( '.dropdown-toggle' ).click( function( e ) {
var _this = $( this );
e.preventDefault();
_this.toggleClass( 'toggle-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
} );
}
initMainNavigation( $( '.main-navigation' ) );
The default behavior is to leave all opened submenus when another one is clicked. I'd like to modify this code so all opened submenus are closed when another one is clicked. Is this possible?
Any help would be appreciated.
Thanks in advance
Topic theme-twenty-fifteen navigation jquery menus Wordpress javascript
Category Web