通過點擊任何地方關閉滑動sidenav

Question

我在空閒時間創建了一個網站就像一個愚蠢的事情。基本上，我和我的單間都在迪斯尼星期天舉行，我們每個星期天都聚在一起看迪士尼電影。我已經管理一個髮電機，從列表中產生隨機迪斯尼電影，現在我試圖整理出我們看過的電影列表...

無論如何，該網站託管在http://disneysunday.tk和對於sidenav一段腳本是： 在標籤：

.sidenav { height: 100%; width: 0; position: fixed;z-index: 1; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.8); overflow-x: hidden; transition: 0.5s; padding-top: 60px; } 
.sidenav a { padding: 3px 16px 3px 16px; text-decoration: none; font-size: 15px; color: #000000; display: block; transition: 0.3s; } 
.sidenav a:hover, .offcanvas a:focus{ color: #72105e; } 
.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } 
@media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} 
.sidenav a {font-size: 18px;} } 

，並在身體標記：

<div id="mySidenav" class="sidenav"> 
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
<a>List of films each in an a tag</a> 
</div> 
<script> 
function openNav() { 
document.getElementById("mySidenav").style.width = "250px"; 
} 
function closeNav() { 
document.getElementById("mySidenav").style.width = "0"; 
} 
</script> 

一切，現在的作品。但是，我希望這樣，當我單擊打開導航的按鈕時，如果我然後單擊導航關閉之外的頁面上的任何位置。甚至只是同一個按鈕。但最好在頁面的任何地方！

謝謝任何​​能夠幫助我的人！不要擔心，如果你不能，因爲這只是一個小項目。 :)

謝謝大家。

Answer 1

您可以通過在文檔上執行一個函數並在文檔上每次發生點擊時檢查事件目標的屬性（e.target）來完成此操作。如果點擊發生在導航中的某個元素上，它應該保持可見狀態，除非它是.closebtn。如果點擊發生在te nav之外的元素上，則應該隱藏它，除非它是.openbtn。 （一個開放的按鈕是必要的前提是你需要能夠帶來sidenav備份）

function openNav() { 
 
document.getElementById("mySidenav").style.width = "250px"; 
 
} 
 
function closeNav() { 
 
document.getElementById("mySidenav").style.width = "0"; 
 
} 
 
/** This is the code you're interested in **/ 
 
document.addEventListener('click', function(e) { 
 
    var snav = document.getElementById("mySidenav"); 
 
    if (e.target.id !== snav.id && !snav.contains(e.target) && !e.target.className.match('openbtn')) 
 
    closeNav(); 
 
}, false);

.sidenav { overflow: hidden; float: right; width: 250px; background: yellow; height: 400px; } 
 
.sidenav a:not(:link) { display: block; }

<button class="openbtn" onclick="openNav()">Films</button><div id="mySidenav" class="sidenav"> 
 
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
<a>List of films each in an a tag</a> 
 
<a>List of films each in an a tag</a> 
 
<a>List of films each in an a tag</a> 
 
<a>List of films each in an a tag</a> 
 
<a>List of films each in an a tag</a> 
 
<a>List of films each in an a tag</a> 
 
</div>