通过单击任何地方，关闭滑动的侧面

Question

我在空闲时间中创建了一个网站。基本上，我和我的Uni House在每个星期日都聚在一起看迪士尼电影。我管理了一个从列表中生成随机的迪士尼电影的发电机，现在我正在尝试整理我们看过的电影的列表...

无论如何，该网站位于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>