jquery - 单击覆盖时关闭侧边栏

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");
})
};

但它不起作用。

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

感谢您的帮助。

Answer 1

@adeneo 简化了事情并且奏效了，原因如下:

1. 当您将 $('body.no-scroll') 缓存到本地变量中时，它当时并不存在。 no-scroll 当时不在 body 上，所以当它真正调用它时，它有一个旧的、空的 jquery DOM 引用。为了解决这个问题，您需要使用 .on http://api.jquery.com/on/就像 adeneo 所做的那样，从更高的 DOM 树开始。注意他是如何在参数中指定一个选择器的。 On() 在您调用它时查看 DOM 的状态，并且永远不会过时。

2. Ashkan 也是正确的，你是双重 $$-ing。当您将 jquery 对象设置为 JS 变量时，无需再次将其包装在 $() 中。

祝你好运!