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

我正在使用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添加到body每当有.menu-link被点击上

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

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

的jsfiddle：https://jsfiddle.net/v1w532d3/7/

来源

2016-09-19 Halnex

尝试做：

$('.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

来源

2016-09-19 00:11:06 klikas

谢谢，它的工作。 – Halnex

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

回答

相关问题