Javascript菜单关闭

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

这是简单的 HTML 和 jquery。希望对您有所帮助。

目录 -

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

j查询 -

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

列表将在单击菜单时toggle，在单击正文时slideUp。

js小提琴 - https://jsfiddle.net/dhananjaymane11/Lgfdmjgb/1/

Answer 2

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

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

Answer 3

jQuery的.toggle函数切换元素可见性，不需要具有布尔值逻辑的代码。

只需在文档中单击时调用菜单上的.toggle即可。

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