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;} }

并在body标签中：

<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>

点击任意位置

1 个答案: