通过点击任何地方关闭滑动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>