單擊頁面中的任意位置時隱藏側邊欄

Question

我有一個動畫側邊欄，當用戶單擊漢堡包按鈕時會出現。 這是結構：

 $('#nav-toggle').click(function() { if($('#nav-toggle').hasClass('active')){ $('.menu').animate({ right: "0px" }, 200); }else{ $('.menu').animate({ right: "-285px" }, 200); } });

 .menu{ right:-285px; height:100%; position: fixed; width: 285px; z-index: 1; background-color: #111111; } .menu ul { border-top: 1px solid #636366; list-style: none; margin: 0; padding: 0; } .menu li { border-bottom: 1px solid #636366; font-family: 'Open Sans', sans-serif; line-height: 45px; padding-bottom: 3px; padding-left: 20px; padding-top: 3px; } .menu li a{ color:white; }

 <div class="menu"> <!-- Menu --> <ul> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Help</a></li> <li><a href="#">Contact</a></li> </ul> </div>

實際上，我們可以通過單擊#nav-toggle元素打開菜單，也可以通過單擊該元素來關閉它。 我想允許用戶通過單擊頁面中的任意位置來關閉此菜單。 我該怎么做？ 我試過e.preventDefault(); 在我的 if 語句中，但它不起作用。

謝謝！

Answer 1

我建議使用toggleClass方法並通過將transition: .2s添加到您的.menu來為其設置動畫，工作示例：

 $('#nav-toggle').click(function(e) { e.stopPropagation(); $(".menu").toggleClass('bar') }); $('body').click(function(e) { if ($('.menu').hasClass('bar')) { $(".menu").toggleClass('bar') } })

 .menu { right: -285px; height: 100%; position: fixed; width: 285px; z-index: 1; background-color: #111111; transition: .2s } .menu ul { border-top: 1px solid #636366; list-style: none; margin: 0; padding: 0; } .menu li { border-bottom: 1px solid #636366; font-family: 'Open Sans', sans-serif; line-height: 45px; padding-bottom: 3px; padding-left: 20px; padding-top: 3px; } .menu li a { color: white; } .bar { right: 0px; } body, html { height: 100%; width: 100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="nav-toggle">Click me</button> <div class="menu"> <!-- Menu --> <ul> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Help</a></li> <li><a href="#">Contact</a></li> </ul> </div>

Answer 2

試試這個，它總是會隱藏用戶對 body 的點擊

$(document).on('click',function(){
     if($("#nav-toggle").hasClass("active")){
          $('.menu').animate({ right: "-100%" }, 200);
      }
});

Answer 3

您可以將父部分添加到您的頁面並附加一個單擊事件，就像您使用 #nav-toggle 所做的一樣，就像這樣

$('.parent-section').click(function() {
 if($('#nav-toggle').hasClass('active')){
  $('.menu').animate({
   right: "0px"
  }, 200);
 } else {
  $('.menu').animate({
   right: "-285px"
  }, 200);
 }

});

或者您可以直接將其添加到正文標簽，如果您要使用它，我建議使用部分而不是正文，希望這會對您有所幫助:)

Answer 4

我稍微編輯了你的代碼：

這里是 ：

$('#nav-toggle').click(function(e) {
    e.stopPropagation();
$('.menu').animate({right: "0px"}, 200);});
$(document).click(function(e){$('.menu').animate({right: "-285px"}, 200);});

https://jsfiddle.net/ndxqdqwc/

Answer 5

補充銀時的回答

$('#nav-toggle').on('click', function(e) {

  e.stopPropagation();

  $(".menu").toggleClass('bar');

  $('body').one('click', function(e) {

   if ($('.menu').hasClass('bar')) {
     $(".menu").toggleClass('bar')
   }

  });

});

這只會從主體中刪除偵聽器，所以它不是每次都執行。

我實際上不確定什么對性能更好，但我不喜歡網站上的每次點擊都經過“if(hasClass)”這一事實

Answer 6

 $('#nav-toggle').click(function(e) { e.stopPropagation(); $(".menu").toggleClass('bar') }); $('body').click(function(e) { if ($('.menu').hasClass('bar')) { $(".menu").toggleClass('bar') } })

 .menu { right: -285px; height: 100%; position: fixed; width: 285px; z-index: 1; background-color: #111111; transition: .2s } .menu ul { border-top: 1px solid #636366; list-style: none; margin: 0; padding: 0; } .menu li { border-bottom: 1px solid #636366; font-family: 'Open Sans', sans-serif; line-height: 45px; padding-bottom: 3px; padding-left: 20px; padding-top: 3px; } .menu li a { color: white; } .bar { right: 0px; } body, html { height: 100%; width: 100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="nav-toggle">Click me</button> <div class="menu"> <!-- Menu --> <ul> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Help</a></li> <li><a href="#">Contact</a></li> </ul> </div>