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

＆＃13;

 $(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;
  }
 });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我不知道我是否理解得更好，你需要的更多：

http://www.w3schools.com/howto/howto_js_dropdown.asp

Answer 3

只需使用此功能

即可

// when click on window
    function actionwindowclick(elem , action){
        $(window).on('click',function(e){
            if (!$(elem).is(e.target) // if the target of the click isn't the container...
                && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
            {
                action();
            }
        });
    }

并在$(function(){});内部使用

actionwindowclick('.myMenu , .menuBtn' , function(){
    $('.myMenu').hide();
});

你的完整代码应该是这样的

    $(function() {
          $('.menuBtn').click(function() {
              $('.myMenu').slideToggle(0);
          });
          $('.myMenu').click(function() {
            //$(this).hide();
          });

          actionwindowclick('.myMenu , .menuBtn' , function(){
               $('.myMenu').hide();
          });
   });
   // when click on window
        function actionwindowclick(elem , action){
            $(window).on('click',function(e){
                if (!$(elem).is(e.target) // if the target of the click isn't the container...
                    && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
                {
                    action();
                }
            });
        }

更改脚本以隐藏文档上的菜单单击

3 个答案: