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

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元素打開菜單，並通過單擊此元素上也將其關閉。我想讓用戶通過點擊頁面中的任何位置來關閉此菜單。 我該怎麼做？我在if語句中嘗試使用e.preventDefault();，但它不起作用。

謝謝！

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

您可以在父節添加到您的網頁，並附上點擊事件一樣的，你有＃NAV-撥動，像這樣

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

}); 

或者你也可以直接添加這body標籤，如果做你要使用此我建議去與部分沒有身體，希望這將幫助你:)

Answer 3

試試這個，它總是會在身體用戶點擊的隱藏

$(document).on('click',function(){ 
    if($("#nav-toggle").hasClass("active")){ 
      $('.menu').animate({ right: "-100%" }, 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

補充了Gintoki的答案

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

    e.stopPropagation(); 

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

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

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

    }); 

}); 

這將剛剛從體內取出的聽衆，這麼好，它不執行每一次。

實際上，我不知道什麼是性能更好，但我不喜歡在網站上的每次點擊均通過正在進行的「如果（hasClass）」