改进单击菜单单击外部关闭多菜单的子菜单

Question

我在WordPress中创建了一个点击菜单，到目前为止一直很好，除了在菜单外单击以关闭它。以下代码有效，但必须有更好的方法。

问题：如果您有任何改进建议，以便我不必单独调用每个菜单类并且可以使用共享课程，请告诉我：

   /*
    * Close .sub-menu when clicked outside menu
    *
    */

    $( document ).bind( 'click touchend', 'html', function( e ) {

        var a    = e.target;

        if ( $( a ).parents( '.nav-primary' ).length === 0 ) {

            $( '.nav-primary li' ).removeClass( 'sub-menu-open' );
            $( '.nav-primary li .sub-menu-toggle' ).attr( 'aria-expanded', 'false' ).attr( 'aria-pressed', 'false' );
            $( '.nav-primary li' ).children( '.sub-menu-toggle' ).children( '.screen-reader-text' ).text( visionary_objectL10n.openChildMenu );

        } // .nav-primary

        if ( $( a ).parents( '.nav-tertiary' ).length === 0 ) {

            $( '.nav-tertiary li' ).removeClass( 'sub-menu-open' );
            $( '.nav-tertiary li .sub-menu-toggle' ).attr( 'aria-expanded', 'false' ).attr( 'aria-pressed', 'false' );
            $( '.nav-tertiary li' ).children( '.sub-menu-toggle' ).children( '.screen-reader-text' ).text( visionary_objectL10n.openChildMenu );

        } // nav-tertiary       

        if ( $( a ).parents( '.nav-procedures' ).length === 0 ) {

            $( '.nav-procedures li' ).removeClass( 'sub-menu-open' );
            $( '.nav-procedures li .sub-menu-toggle' ).attr( 'aria-expanded', 'false' ).attr( 'aria-pressed', 'false' );
            $( '.nav-procedures li' ).children( '.sub-menu-toggle' ).children( '.screen-reader-text' ).text( visionary_objectL10n.openChildMenu );

        } // nav-procedures     

        $( document ).unbind( 'click touchend', 'html' );

} );

我尝试了什么。

这不起作用。当我点击外面它可以工作，但当我点击另一个菜单时，我只是点击的子菜单保持打开状态。 我显然只是猜测，我不知道。

$( document ).bind( 'click touchend', 'html', function(e) {

        var target    = e.target,
            parents = $( target ).parents( 'nav' );

        if ( $( parents ).length === 0  ) {

            $( target ).parents().find( 'li' ).removeClass( 'sub-menu-open' );

        } 

        $( document ).unbind( 'click touchend', 'html' );

} );         

请参阅下面的答案，看看我最终做了什么。

Answer 1

你刚刚结束： - ）

第1部分：你可以简单地在你的所有导航中添加一个导航类 - ＆＃34;无论什么＆＃34;元素并搜索仅具有.nav类

的已点击元素

第2部分：在.nav元素中点击功能从任何sub-menu-open中移除课程li，然后将其添加到仅点击li或.nav（我和＃39;我不确定，因为我不知道你的HTML，但似乎你知道该怎么做，怎么做只是有点困惑）

Answer 2

接受的答案指向了一个方向，这有助于解决这个问题。然而，由于我切换属性和L10n文本的方式的复杂性，我正在努力。所以我最终做了这个简短而有效的解决方案，这是我从this answer on SO学到的。所有菜单都有一个共享类'导航栏菜单'：

$( document ).bind( 'click touch', 'body', function( event ) {

    var $dropdowns = $( '.nav-bar-menu li' );

    $dropdowns.not( $dropdowns.has( event.target ) ).removeClass( 'sub-menu-open' );
    $dropdowns.not( $dropdowns.has( event.target ) ).children( '.sub-menu-toggle' ).attr( 'aria-expanded', 'false' ).attr( 'aria-pressed', 'false' );
    $dropdowns.not( $dropdowns.has( event.target ) ).children( '.sub-menu-toggle' ).children( '.screen-reader-text' ).text( visionary_objectL10n.openChildMenu );

   $( document ).unbind( 'click touch', 'body' );

} );