Sidebar Schließt onclick nur, wenn Sie außerhalb davon klicken

Question

Ich habe eine Schaltfläche/einen Link, der meine Seitenleiste öffnet und die relative Funktion onclick aufruft. Es ist so etwas wie

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

, die diese Funktion

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

und schließt auf Dokument klicken Sie ruft wie

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

Es funktioniert, aber das Problem ist, dass die Seitenleiste schließt auch wenn ich im Inneren klicken . Ich möchte es offen halten, da ich dort Dropdown-Menüs habe. Wie kann ich es erreichen? Vielen Dank.

Answer 1

Sie können es tun, wie diese

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