Question

我创建了一个带侧边栏的网站，一切都按预期工作。

我得到的问题是，当用户点击叠加层时，我正试图关闭侧边栏（或者一般情况下，所有内容都不是侧边栏或侧边栏本身的链接）

here到目前为止我所得到的一个例子。

我基本上试图删除叠加点击上的所有相关类，如下所示：

function sideBarHandler() {
    var body = $('body');
    var overlay = $('body.no-scroll:before');
    var menu = $('.hamburger');
    var bar = $('.leftSidebar');

$(menu).click(function () {
    $(body).toggleClass('no-scroll');
    $(this).toggleClass('open');
    $(bar).toggleClass('visible');

});
$(overlay).click(function () {
    console.log(overlay);
    $(body).removeClass('no-scroll');
    $(menu).removeClass("open");
    $(bar).removeClass("visible");
})
};

但它不起作用。

有关更多代码和详细信息，请参阅上面的codepen示例。

感谢您的帮助。

Answer 1

@adeneo简化了事情并且它起作用了，这就是原因：

当您将$（＆＃39; body.no-scroll＆＃39;）缓存到本地var中时，它当时并不存在。当时没有滚动在主体上，所以当它真正地调用它时，它有一个旧的，空的jquery DOM引用。为了解决你需要使用.on http://api.jquery.com/on/作为adeneo，从DOM树的更高层。请注意他是如何在参数中指定选择器的。 On（）会在您调用DOM时查看DOM的状态，并且永远不会过时。
Ashkan也是对的，你是双倍的。如果将jquery对象设置为JS变量，则无需再次将其包装在$（）中。

Answer 2

$(overlay).click(function () {
    console.log(overlay);
    body.removeClass('no-scroll');
    menu.removeClass("open");
    bar.removeClass("visible");
});

jquery - 点击叠加

2 个答案: