文書のメニューを非表示にするスクリプトを変更します。

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>

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(){});内部のあなたの完全なコードは、この

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