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，就可以将body类添加到.menu-link

$('.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作为非画布功能，因此您似乎不需要它。

有关所有可用选项，请参阅bigSlide的文档：https://github.com/ascott1/bigSlide.js

当我关闭画布边栏时，背景叠加不会消失

1 个答案: