側邊欄只有當點擊它時才關閉onclick

Question

我有一個按鈕/鏈接打開我的側邊欄，調用相對功能onclick。這有點像

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

調用該函數

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

，並關閉在文件點擊喜歡

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

它的工作原理，但問題是，如果我點擊裏面的側邊欄，甚至關閉。我想保持打開狀態，因爲我在那裏有下拉菜單。 我該如何實現它？謝謝。

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>