通过单击按钮并单击未选中的其他元素，将 类 切换为 jQuery

Question

我想用 'drawer-toggle' 按钮切换抽屉，如代码片段所示。

唯一的问题是当抽屉打开时，我还想通过在 .drawer-div 外部单击来关闭它。

有人可以帮我解决这个问题吗？必须有更有效的方法。

.locked class 用于 css 目的。

$(".drawer-toggle").click(function(e){
 $(".drawer").toggleClass('open');
 $(".main").toggleClass('locked');

 e.stopPropagation();
});

$(".main").click(function(){
 if ($(".drawer").hasClass('open')) {
  $(".drawer").toggleClass('open');
  $(".main").toggleClass('locked');
 }
});

body,
html {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
.locked {  
 overflow: hidden !important;
}
.drawer {
  position: fixed;
  background-color: $white;
  width: 200px;
  top: 0;
  bottom: 0;
  right: -200px;
  padding: 20px;
  border-left: 1px solid $border-color;
  transition: all 0.3s ease 0s;
}
.drawer.open {
  right: 0;
}
.drawer.open ~ .main {
  left: -200px;
}
.drawer.open ~ .main:after {
  content: ' ';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 900;
}
.main {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  background-color: grey;
  transition: all 0.3s ease 0s;
}
.drawer-toggle {
  display: inline-block;
  padding: 10px;
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drawer">
  <a class="drawer-toggle">toggle</a>
  <ul>
    <li><a href="#">Menu item</a></li>
  </ul>
</div>
<div class="main">
  <a class="drawer-toggle">toggle</a>
</div>

Answer 1

在文档上添加侦听器并在处理程序内部检查目标是抽屉还是切换按钮。

$(document).on('click', function(event) {
  var $tgt = $(event.target)
  if (!$tgt.closest('.drawer').length && !$tgt.closest('.drawer-toggle').length && $('.drawer').hasClass('open')) {
    $(".drawer").removeClass('open');
    $(".main").removeClass('locked');
  }    
});