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>

边栏只有在外部单击时才会关闭

1 个答案: