第二十十五条:更改导航菜单行为

时间:2017-04-29 作者:leemon

这是JS代码,负责“215”主题中的主导航菜单:

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\' ) );
默认行为是在单击另一个子菜单时保留所有打开的子菜单。我想修改此代码,以便在单击其他子菜单时关闭所有打开的子菜单。这可能吗?

任何帮助都将不胜感激。

提前感谢

1 个回复
最合适的回答,由SO网友:leemon 整理而成

如果有人感兴趣,我想我设法找到了一个解决方案。只需在e.preventDefault(); 行和之前_this.toggleClass( \'toggle-on\' ); 一个:

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\' );
我不知道是否有更好的方法,但这似乎是我想要的。