当我关闭画布边栏时，背景覆盖不会消失。

Question

我正在使用BigSlide JS创建一个非画布边栏。这个插件不具备添加背景覆盖的功能，所以我添加了自己的插件。

这是显示单击侧边栏的图标。

<div class="icon menu1 menu-link">
    <span></span>
    <span></span>
    <span></span>
</div>

我就是这样初始化的

$('.menu-link').bigSlide({
    menu: '#off-canvas-menu',
    menuWidth: '270px',
    easyClose: true
});

现在，对于背景覆盖，我创建了一个新的html div，并将它放置在内容div的顶部。

<div class="site-overlay"></div>

然后我添加了它的CSS

.site-overlay {
    display: none;
}
.menu-open .site-overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-animation: fade 500ms;
    animation: fade 500ms;
}

我添加了一个JS函数，每当单击带有类menu-open的div时，就将类.menu-link添加到body中。

$('.menu-link').click(function() {
    $('body').addClass('menu-open');
});

但现在，当我关闭边栏，背景覆盖仍然存在，我不知道如何使它消失。

jsFiddle: https://jsfiddle.net/v1w532d3/7/

Answer 1

试着做：

$('.menu-link').bigSlide({
   menu: '#off-canvas-menu',
   menuWidth: '270px',
   easyClose: true,
   afterOpen: function(){
      $('body').addClass('menu-open');
   },
   afterClose: function(){
    $('body').removeClass('menu-open');
   }
});

并删除：

$('.menu-link').click(function() {
   $('body').addClass('menu-open');
});

因为您似乎不需要它，因为您将bigSlide用于画布之外的功能。

有关所有可用选项，请参见big幻灯片的文档：https://github.com/ascott1/bigSlide.js