Question

在下面的代码中，当menuLeft有类＆c; cbp-spmenu-open＆＃39;时，它会显示在屏幕上。如果它没有该课程，则不在屏幕上。

我试图制作一些代码，以便当菜单在屏幕上时，当用户点击菜单以外的任何内容时它会消失。

在下面的代码中，我基本上试图告诉它：

如果屏幕上显示菜单，点击网页以外的任何内容都会使菜单消失。

不太确定我哪里出错了，所以如果有人能发布一些非常棒的正确代码！感谢。

if ( $('.menuLeft').hasClass('cbp-spmenu-open') ) {
        $("*").not("#menuRight").click(function() {
        classie.toggle( menuLeft, 'cbp-spmenu-open' );
    });
}

编辑：

var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
        menuRight = document.getElementById( 'cbp-spmenu-s2' ),
        menuTop = document.getElementById( 'cbp-spmenu-s3' ),
        menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
        // showLeft = document.getElementById( 'showLeft' ),
        showRight = document.getElementById( 'showRight' ),
        showTop = document.getElementById( 'showTop' ),
        showBottom = document.getElementById( 'showBottom' ),
        showLeftPush = document.getElementById( 'showLeftPush' ),
        showRightPush = document.getElementById( 'showRightPush' ),
        body = document.body;

        var showLeft=document.getElementsByClassName('showLeft');
        for(var i=0;i<showLeft.length;i++) {
            showLeft[i].onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeft' );
};

}

// showLeft.onclick = function() {
//  classie.toggle( this, 'active' );
//  classie.toggle( menuLeft, 'cbp-spmenu-open' );
//  disableOther( 'showLeft' );
// };
showRight.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuRight, 'cbp-spmenu-open' );
    disableOther( 'showRight' );
};
showTop.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuTop, 'cbp-spmenu-open' );
    disableOther( 'showTop' );
};
showBottom.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuBottom, 'cbp-spmenu-open' );
    disableOther( 'showBottom' );
};
showLeftPush.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'cbp-spmenu-push-toright' );
    classie.toggle( menuLeft, 'cbp-spmenu-open' );
    disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'cbp-spmenu-push-toleft' );
    classie.toggle( menuRight, 'cbp-spmenu-open' );
    disableOther( 'showRightPush' );
};

function disableOther( button ) {
    if( button !== 'showLeft' ) {
        classie.toggle( showLeft, 'disabled' );
    }
    if( button !== 'showRight' ) {
        classie.toggle( showRight, 'disabled' );
    }
    if( button !== 'showTop' ) {
        classie.toggle( showTop, 'disabled' );
    }
    if( button !== 'showBottom' ) {
        classie.toggle( showBottom, 'disabled' );
    }
    if( button !== 'showLeftPush' ) {
        classie.toggle( showLeftPush, 'disabled' );
    }
    if( button !== 'showRightPush' ) {
        classie.toggle( showRightPush, 'disabled' );
    }
}

Answer 1

这不是最干净的解决方案，但我认为这对您来说工作量最少

这样的事情：

$("body").click(function(event) {
    $('.menuRight').addClass('cbp-spmenu-close');
});

showRightMenu = function(e) {
    $('.menuRight').removeClass('cbp-spmenu-close');
    e.preventDefault();
    e.stopPropagation();
}

$(".menuRight").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});

这是JSFiddle：

http://jsfiddle.net/Lpbxxufd/7/

努力让一些基本的JQuery和JS代码工作

1 个答案: