通过单击按钮并单击除选定之外的其他元素，使用jQuery切换类

Question

我想用抽屉式切换按钮切换抽屉，如代码段所示。

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

任何人都可以帮我这个吗？必须有一种更有效的方式。

.locked类用于css目的。

＆＃13;

＆＃13;

$(".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');
	}
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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');
  }    
});