jQuery:单击外部元素到 "close"使用toggleClass 出现的菜单

Question

我已经构建了一些导航(针对移动网络)，它使用 jQuery 中的toggleClass 方法来隐藏和显示菜单。单击“MENU”图标/按钮可在菜单 div 上打开和关闭类“.active”(显示:隐藏)。

我一直在拼命寻找一种通过单击菜单外部(页面上的任何位置)来隐藏菜单的方法。目前，关闭菜单的唯一方法是再次单击 MENU 按钮，这会将 div 切换回 .active 类(隐藏)。

我还没有找到任何与此类似的示例以及如何完成此操作的解决方案。

$(document).ready(function() {
    $(".toggle-nav").click(function(e) {
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
 
        e.preventDefault();
    });
	
	
});

/* .toggle-nav is the menu icon/button. */

.toggle-nav {
	font-size: 20px;
	margin-left: 7px;
}

/* The .active class hides the menu by default.  
When .toggle-nav (menu icon) is clicked, .active class is 'turned off', 
revealing the menu. When clicked again, it hides the menu. */ 

.menu ul.active {
	display: none;	
}

.menu ul {
	width: 10em;
	position: absolute;
	top: 60%;
	padding: 10px 18px;
	background: #e6e5e4;
}

.menu li {
	margin: 5px 0px 5px 0px;
	float: none;
	display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="menu">

<a class="toggle-nav" href="#">MENU</a>

<ul class="active">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul> 

</div>

Answer 1

为此，请使用 $(document).click() 检测页面上的点击，并将 stopPropagation() 添加到 $(".toggle-nav ").click 仅制作点击菜单。

请尝试:

$(document).ready(function() {
    $(".toggle-nav").click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });
	$(document).click(function(e){
      if(!e.target.closest("ul") && $(".menu a").hasClass("active")){
         $(".menu ul").toggleClass("active");
         $(".toggle-nav").toggleClass("active");
      }
    })
	
});

/* .toggle-nav is the menu icon/button. */

.toggle-nav {
	font-size: 20px;
	margin-left: 7px;
}

/* The .active class hides the menu by default.  
When .toggle-nav (menu icon) is clicked, .active class is 'turned off', 
revealing the menu. When clicked again, it hides the menu. */ 

.menu ul.active {
	display: none;	
}

.menu ul {
	width: 10em;
	position: absolute;
	top: 60%;
	padding: 10px 18px;
	background: #e6e5e4;
}

.menu li {
	margin: 5px 0px 5px 0px;
	float: none;
	display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="menu">

<a class="toggle-nav" href="#">MENU</a>

<ul class="active">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul> 

</div>