javascript - 单击/触摸外部 javascript 时关闭菜单

Question

当有人点击或触摸外部时，css/javascript 触发菜单不会关闭。

您必须按菜单按钮才能关闭它。我尝试了一些 jquery 函数，例如:

$('#menucontainer').click(function(event) {
    event.stopPropagation();
});

但这行不通。在这里，我用所有相关代码制作了一个简单的 jsfiddle:

https://jsfiddle.net/4sgf84jL/

我会很感激一些帮助。谢谢

Answer 1

当您打开菜单时，您应该监听对文档的点击。然后在单击文档时关闭弹出窗口(同时删除文档上的监听器)。

PS:让您的听众也保持在菜单容器上 ;)

这是您可以使用的示例(我编辑了您的 fiddle ):

(function(){
	//Remember if the menu is opened or not
  var menuOpened = false;
	var menuElement = document.getElementById('menu_control');
  var menuContainer = document.getElementById('menu-standard');
  
  // Add click listener on menu icon
  menuElement.addEventListener('click', onMenu_click);
  
   // Add click listener on menu 
  menuContainer.addEventListener('click', onMenuContainer_click);
  
  function toggleMenu(){
  	menuOpened = !menuOpened;
  
  	if (menuOpened){
    	menuContainer.className += ' show_menu';
      document.addEventListener('click', onDoc_click);
    }
    else{
    	menuContainer.className = menuContainer.className.replace('show_menu', '').trim();
      document.removeEventListener('click', onDoc_click);
    }
  }
  
  function onMenu_click(domEvent){
  	domEvent.stopPropagation();
    toggleMenu();
  }
  
  function onDoc_click(domEvent){
  	domEvent.stopPropagation();
    toggleMenu();
  }
  
  function onMenuContainer_click(domEvent){
  	domEvent.stopPropagation();
  }
})();

.nav,
.menu_control{font-size:16px;line-height:23px;}
.nav{display:none;position:relative;width:219px;height:0;top:7px;list-style:none;z-index:9;background-color:#666;color:#fff}
.nav .sub-menu{list-style:none;padding-left:14px;}
.nav .sub-menu li{width:192px;background-color:#666;}
.nav .sub-menu .current-menu-item > a{background-color:#666;}
.nav a,
.show_menu{display:block;}
.nav a{color:#fff;padding:7px 14px;}
.nav a:hover{color:white;background-color:#999;}
.nav .current-menu-item > a{color:#fff;background-color:#666;cursor:text;}
.nav li{background-color:#666;}
.menu_control{display:block;color:#111111;cursor:pointer;margin:7px -27px 0 -27px;padding-right:27px;padding-left:27px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.navicon-line{width:32px;height:4px;border-radius:1px;margin-bottom:5px;background-color:#333;}

<span id="menu_control" class="menu_control">
    <div class="navicon-line"></div>
     <div class="navicon-line"></div>
    <div class="navicon-line"></div>
</span>
        
<ul id="menu-standard" class="nav">
<li id="menu-item"><a href="/">Home</a></li>
<li id="menu-item"><a href="#">test</a>
<ul class="sub-menu">
  <li id="menu-item"><a href="#">test</a></li>
  <li id="menu-item"><a href="#">test</a></li>
  <li id="menu-item"><a href="#">test</a></li>
  <li id="menu-item"><a href="#">test</a></li>
 </ul>
</li>
<li id="menu-item"><a href="#">test</a></li>
</ul>
<br />
Content Content  Content 

这不是最好的方法，因为您添加了多个点击监听器...您可以在文档上只有一个监听器并根据事件的目标执行不同的操作...