Question

我正在尝试创建一个下拉菜单，当单击下拉按钮时，它会显示子菜单。当我点击其他任何地方时它应该隐藏子菜单。

这是我的代码：

function initMainNavigation( container ) {

    container.find( '.dropdown-toggle' ).click(function(e){
        var dropdown = $( this );
        e.preventDefault();
        dropdown.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
     });

    $("body").click(function(){
        var dropdown = container.find( '.dropdown-toggle' );
        dropdown.next( '.children, .sub-menu' ).removeClass('toggled-on');
    });

}
initMainNavigation( $( '.main-navigation' ) );

但是当我点击下拉切换时，子菜单将不会显示。当我在firebug中调试它时，也会触发$("body").click()事件。我猜是因为'.main-navigation'位于"body"内。

我知道如果我删除$("body").click()就行了。但是我无法点击其他隐藏子菜单的位置。

Answer 1

你的身体点击事件会气泡到.dropdown-toggle容器，所以当你点击.dropdown-toggle时你会触发两个事件

function initMainNavigation( container ) {

    container.find( '.dropdown-toggle' ).click(function(e){
        var dropdown = $( this );
        e.preventDefault();
        dropdown.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
     });

    $("body").click(function(e){
        var dropdown = container.find( '.dropdown-toggle' );
        if(!$(e.target).closest('.dropdown-toggle').length) {//trigger the  toggle only if the element is not .dropdown-toggle or a child of it
        dropdown.next( '.children, .sub-menu' ).removeClass('toggled-on');
         }
    });

}
initMainNavigation( $( '.main-navigation' ) );

我似乎无法让我的下拉代码正常运行

1 个答案: