Question

我想要实现的是在侧面的任何地方切换侧面菜单，除了在侧面菜单内部。我目前可以从其切换链接切换侧面菜单（在js小提琴中注释掉第13-14行），但不能通过单击身体上的任何位置来切换。这是有关的代码：

$('body').bind('click', function (e) {
var opened = $('body').hasClass('sidemenu-open');
if (opened === true) {
    $('.sidemenu').removeClass('is-visible');
    $('body').removeClass('sidemenu-open');
}
});

JSFIDDLE

我知道我可以为内容添加一个包装器，但我在HTML结构中没有太大的灵活性。

Answer 1

有两个问题。首先，当您单击链接时，单击正在冒泡到正文。所以菜单切换打开，然后再次切换，所以没有任何反应。使用event.stopPropagation()来阻止这种情况。

其次，当侧面菜单关闭时，<body>只是包含链接的一行。如果您希望能够点击窗口中的任意位置，请使用$(document)而不是$('body')。

$(function () {
    $('.sidemenu-toggle').on('click', function (event) {
        event.preventDefault();
        event.stopPropagation();
        $('.sidemenu').toggleClass('is-visible');
        $('body.sidemenu-enabled').toggleClass('sidemenu-open');
        $('.sidemenu').toggleClass('sidemenu-open');
    });
});

$(document).on('click', function (e) {
    var opened = $('body').hasClass('sidemenu-open');
    if (opened === true) {
        $('.sidemenu').removeClass('is-visible');
        $('body').removeClass('sidemenu-open');
    }

});

DEMO

Answer 2

您在侧边菜单上的点击向下传播到正文并激活该处理程序 - preventDefault不是您所追求的，您还需要返回false。请尝试使用此单击处理程序。

$(function () {
    $('.sidemenu-toggle').on('click', function (event) {
        $('.sidemenu').toggleClass('is-visible');
        $('body.sidemenu-enabled').toggleClass('sidemenu-open');
        $('.sidemenu').toggleClass('sidemenu-open');
        return false;
    });
});

Answer 3

您可以在点击事件中获取目标元素，您可以通过该事件获得更多条件。

    $('body').click(function(evt){    
           if(evt.target.id == "your_sidemenu_id"){
            //do nothing    
           }
           else{
           //do the toggle here as this will be implemented whenever any element is clicked other than your sidemenu
           }

});

jQuery如果body hasClass然后sidemenu toggleClass问题

3 个答案: