jquery - Twenty Fifteen: Change navigation menu behavior

admin管理员组

文章数量:1295887

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

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

• menus
• jquery
• javascript
• navigation
• theme-twenty-fifteen

Share Improve this question asked Apr 29, 2017 at 14:40 leemonleemon 2,03244 gold badges2323 silver badges5151 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In case anyone is interested, I think I managed to find a solution. Just had to add the following two lines of code just after the e.preventDefault(); line and before the _this.toggleClass( 'toggle-on' ); one:

container.find( '.dropdown-toggle.toggle-on' ).not( _this ).not( _this.parents( '.children, .sub-menu' ).prev( '.dropdown-toggle' ) ).removeClass( 'toggle-on' ).attr( 'aria-expanded', false );
container.find( '.children.toggled-on, .sub-menu.toggled-on' ).not( _this.next( '.children, .sub-menu' ) ).not( _this.parents( '.children, .sub-menu' ) ).removeClass( 'toggled-on' );

I don't know if there's a better way to do it, but this seems to work as I want.

本文标签： jqueryTwenty Fifteen Change navigation menu behavior