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

Question

我构建了一些导航（用于移动网络），使用 jQuery 中的 toggleClass 方法来隐藏和显示菜单。单击 'MENU' icon/button 可打开和关闭菜单 class '.active'（显示：隐藏）div。

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

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

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

My Html code:

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

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

Answer 2

为此使用 $(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>

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

jQuery: Click outside element to "close" menu that uses toggleClass to appear

mobile

jquery

menu

click

toggleclass