Question

我有一个HTML菜单。单击“菜单”时，将打开一个列表，再次单击“菜单”，列表将关闭。

如果用户点击屏幕上的任意位置，我需要关闭菜单

<script type="text/javascript">
$(function() {
  var menuVisible = false;

    $('#menuBtn').click(function() { 
    if (menuVisible) {
      $('#menu').css({
        'display': 'none'
      });
      menuVisible = false;
      return;
    }
    $('#menu').css({
      'display': 'block'
    });
    menuVisible = true;
  });
  $('#menu').click(function() {
    $(this).css({
      'display': 'none'
    });
    menuVisible = false;
  });
});

Answer 1

为文档创建onclick侦听器就足够了：

document.onclick = myClickAnywhereHandler;
function myClickAnywhereHandler() {
  alert("hide the menu");
  $('#menu').css({
    'display': 'none'
  });
}

Answer 2

这是简单的Html和jquery。希望它会对你有所帮助。

Html -

<div class="container">
  <button id="menu">menu</button>
  <div id="list">list</div>
</div>

jQuery -

$('#menu').click(function(e) {
    e.stopPropagation();
    $('#list').slideToggle();
})
$('#list').click(function(e) {
    e.stopPropagation();
});
$('body').click(function() {
    $('#list').slideUp();
})

点击菜单时会显示toggle，点击正文时会显示slideUp。

jsFiddle - https://jsfiddle.net/dhananjaymane11/Lgfdmjgb/1/

Answer 3

jQuery＆＃39; .toggle函数切换元素可见性，具有布尔值逻辑的代码是不必要的。

只要在文档中点击一下，就可以在菜单上拨打.toggle。

$(document).click(function(){
  $("#menu").toggle();
});

Javascript菜单关闭

3 个答案: