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

Posted 2023-05-09

【中文标题】jQuery：单击外部元素以“关闭”使用toggleClass出现的菜单

【英文标题】：jQuery: Click outside element to "close" menu that uses toggleClass to appear

【发布时间】：2016-04-18 05:44:08

【问题描述】：

我已经构建了一些导航（用于移动网络），它使用 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>

【参考方案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>

【参考方案2】：

我的 html 代码：

<div class="click-nav">
  <ul class="no-js">
    <li>
      <a href="#" class="clicker"><img src="img/i-1.png" >Profile</a>
      <ul>
        <li><a href="#"><img src="img/i-2.png" >Dashboard</a></li>
        <li><a href="#"><img src="img/i-3.png" >Settings</a></li>
        <li><a href="#"><img src="img/i-4.png" >Privacy</a></li>
        <li><a href="#"><img src="img/i-5.png" >Help</a></li>
        <li><a href="#"><img src="img/i-6.png" >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');
    
  );
);

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