サイドバーは、その外側をクリックしたときにのみクローズします

Question

私のサイドバーを開くボタン/リンクがあり、相対機能onclickが呼び出されています。それは

function opensidebar() { 
    var $menu = $("#sidebar-wrapper"); 
    $menu.toggleClass("active"); 
}; 

この関数を呼び出し、それが動作

$(document).click(function(){ 
    $('#sidebar-wrapper').removeClass("active"); 
}); 

のような文書のクリックで閉じますが、問題は、サイドバーは、私はそれの内側をクリックしても閉じていることである

<a id="menu-toggle" href="javascript:void(0);" onclick="event.stopPropagation(); opensidebar();" type="button"> 
    <i class="sprite-t-toggle-side"></i> 
</a> 

のようなものです。そこにドロップダウンメニューがあるので、開いておきたいです。 どうすれば実現できますか？ありがとう。

Answer 1

あなたはこの

$('#open').click(function() { 
 
    $('.sidebar').toggleClass('active') 
 
}) 
 

 
$(document).click(function(e) { 
 
    var sidebar = $(".sidebar, #open"); 
 
    if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) { 
 
    sidebar.removeClass('active') 
 
    } 
 
});

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.sidebar { 
 
    transform: translateX(-120%); 
 
    display: inline-block; 
 
    height: 100vh; 
 
    background: lightblue; 
 
    transition: all 0.3s ease-in; 
 
    width: 200px; 
 
} 
 
.active { 
 
    transform: translateX(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar">Sidebar</div> 
 
<button id="open">Toggle</button>