javascript - 单击任意位置关闭滑动侧边导航

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。 (仅当您需要能够恢复侧导航时才需要打开按钮)

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>