jQuery：单击外部元素以“关闭”使用toggleClass出现的菜单

Question

我已经构建了一些导航（用于移动网络），它使用 jQuery 中的 toggleClass 方法来隐藏和显示菜单。单击“菜单”图标/按钮可以打开和关闭菜单 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>

Answer 2

我的 HTML 代码：

<div class="click-nav">
  <ul class="no-js">
    <li>
      <a href="#" class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a>
      <ul>
        <li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li>
        <li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li>
        <li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li>
        <li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li>
        <li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS：

.click-nav {margin:100px auto;width:200px;}
.click-nav ul {position:relative;font-weight:900;}
.click-nav ul li {position:relative;list-style:none;cursor:pointer;}
.click-nav ul li ul {position:absolute;left:0;right:0;}
.click-nav ul .clicker {position:relative;background:#2284B5;color:#FFF;}
.click-nav ul .clicker:hover,.click-nav ul .active {background:#196F9A;}
.click-nav img {position:absolute;top:9px;left:12px;}
.click-nav ul li a {transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;display:block;padding:8px 10px 8px 40px;background:#FFF;color:#333;text-decoration:none;}
.click-nav ul li a:hover {background:#F2F2F2;}

/* Fallbacks */
.click-nav .no-js ul {display:none;}
.click-nav .no-js:hover ul {display:block;}

jQuery :

$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
      $('.click-nav .js ul', this).slideUp();
      $('.clicker').removeClass('active');
    }
  });
});

我已经试过了，效果很好。 所以我希望这会奏效......