jQueryのサイドバーのメニューの背景が表示されません。外側をクリックしてください。

Question

サイドバーの後にjQueryのサイドバーメニューが表示されると、問題が発生します。オーバーレイ（.backdrop）は表示されません。ここで

だから問題は、サイドバーが.backdropのない隠した後、あるfiddle

HTML

<li class="topHeaderMenu leftMenu listMenu" id="open"><div class="listMenuDiv"><i class="glyphicon glyphicon-align-justify"></i></div></li> 

<div class="backdrop"></div> 

<div class="sidebar"> 
    content 
</div> 

jQueryの

$('#open').click(function() 
{ 
    $(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove'); 
    $('.sidebar').toggleClass('active'); 
$(".backdrop").toggle(); 
}) 

$(document).click(function(e) 
{ 
    var sidebar = $(".sidebar, #open"); 

    if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0) 
    { 
     $('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove'); 
     sidebar.removeClass('active'); 
    } 
}); 

CSS

p { 
text-align: center; 
} 

ul 
{ 
    list-style: none; 
} 

.sidebar 
{ 
    position: fixed; 
    transform: translateX(-120%); 
    display: inline-block; 
    height: 100vh; 
    background: lightblue; 
    transition: all 0.3s ease-in; 
    width: 200px; 
    z-index: 8; 
} 

.active 
{ 
    transform: translateX(0); 
} 

.backdrop 
{ 
height: 100vh; 
width: 100%; 
z-index: 7; 
position: fixed; 
top: 0; 
left: 0; 
display: none; 
background-color: #000; 
opacity: 0.2; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease; 
} 

です隠す私が望むのは、サイドバーの外側をクリックすると非表示になります。

Answer 1

あなたは 'アクティブ'クラスを削除していますが、背景のdivは隠していません。以下のコードを使用してください

$('#open').click(function() 
    { 
     $(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove'); 
     $('.sidebar').toggleClass('actives'); 
     $(".backdrop").toggle(); 
    }) 

    $(document).click(function(e) 
    { 
     if($(".sidebar.actives").length > 0) 
     { 
      var sidebar = $(".sidebar, #open"); 

      if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0) 
      { 
       $('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove'); 
       sidebar.removeClass('actives'); 
     $(".backdrop").hide(); 
      } 
     } 
    });