侧边栏仅在单击外部时关闭 onclick

Question

我有一个 button/link 打开我的边栏，调用相关函数 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>

侧边栏仅在单击外部时关闭 onclick

Sidebar Closes onclick only when click outside of it

javascript

jquery

addclass

toggle

removeclass