javascript - 更改脚本以在文档单击时隐藏菜单

Question

我正在使用一段 JS 来制作我在网上找到的一个很棒的小按钮。该按钮工作得很漂亮，但当我单击页面时它不会隐藏菜单。我必须单击菜单按钮才能再次隐藏菜单。

我环顾四周，看到了类似的其他线程，但我对 JS 的有限理解使我对自己能做的事情感到有限。

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

我应该在这段代码中添加什么，以及如何表达它，以使当我单击菜单/按钮以外的任何地方时菜单消失？

我来这里只是作为最后的手段。我尝试过的一切都会破坏功能。感谢您的帮助! :)

Answer 1

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

$(document).on('click',function(e){    
  // if the click is made any where on body except .menuBtn element  
  // then hide the menubar
  if($(e.target).closest('.menuBtn').length === 0){
    $('.myMenu').css({'display':'none'});
    menuVisible = false;
  }
 });
});

.menuBtn { 
    background-color: cornflowerblue;
    font-size:1.1em;
    padding:7px 15px;
    display:inline-block;
    margin: 7px;
    border-radius:6px;
    border:solid rgba(0,0,0,0.2);
    border-width:1px 1px 5px;
    box-shadow:0 5px 0 rgba(0,0,0,0.1),
    inset 0 0 3px rgba(255,255,255,0.3);
    cursor:pointer;
    transition:0.4s ease;
        }

.menuBtn:hover { 
    transform:translateY(-3px); 
    box-shadow:0 6px 0 rgba(0,0,0,0.1), inset 0 0 1px rgba(255,255,255,0.4); 
    border-bottom-width:8px; }
        
.menuBtn:active { transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.4); border-bottom-width:2px; transition:0.1s ease; }

.wrapper {
    
    position: relative;
    display: inline-block;
}

.myMenu {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
}

.myMenu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.myMenu a:hover {background-color: cornflowerblue; color: yellow;}

.wrapper:hover  {
    display: block;
}
.myMenu {
    display: none;
}

.menuBtn:hover .menuBtn {
    background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <button class="menuBtn"></button>
  <div class="myMenu">
    <a href="#">Login</a>
    <a href="#">Register</a>  
    <a href="#">About Us</a>
    <a href="#">About the Crate</a>
    <a href="#">About Us</a>
</div>
</div>