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

Sidebar Closes onclick only when click outside of it

本文关键字：单击 外部      更新时间：2023-09-26

我有一个按钮/链接，可以打开我的侧边栏，调用相关函数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");
});

它有效，但问题是即使我点击边栏内部，它也会关闭。我想保持它打开，因为那里有下拉菜单。我怎样才能做到这一点？谢谢

你可以这样做

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

相关文章：