オフキャンバスのサイドバーを閉じると、背景オーバーレイが消えない

Question

オフキャンバスのサイドバーを作成するのにBigSlide JSを使用しています。オフラインのキャンバスのサイドバーが呼び出されるたびに、プラグインに背景オーバーレイを追加する機能がないため、自分で追加しました。

これはクリックで

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

をサイドバーを示しており、これは私が新しいHTMLのdivを作成し、でそれを置い背景オーバーレイのための今すぐ

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

を初期化する方法であるアイコンでありますコンテンツのdiv

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

の上部には、その後、私はそのCSS

0123を追加しました

.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; 
} 

そして私はbody

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

をクリックしかし、私はサイドバーを閉じると、今、バックグラウンドオーバーレイが残ってます.menu-linkクラスを持つたびのdivにクラスmenu-openを追加するために、JSの機能を追加し、私はそれをどうやって消し去るか分かりません。

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

Answer 1

やってみてください：あなたがオフのためbigSlideを使用しているため、それを必要としていないようだと

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

を：

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

をして削除キャンバス機能。すべての利用可能なオプションについては、こちらを

参照bigSlideのマニュアル：https://github.com/ascott1/bigSlide.js