javascript - 侧边栏菜单在单击时不会折叠
问题描述
当用户单击左侧的垂直黑色边框时会显示侧边栏菜单,但当我单击关闭按钮时它不会折叠。我希望它使用 javascript 或 jquery 以相同的动画结束。
<div id="mySidenav" class="sidenav" onclick="openNav()" style="cursor: pointer;">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<h2>Animated Sidenav</h2>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
解决方案
它不起作用,因为您在嵌套元素上注册了两个 onclick 事件处理程序。
当您单击内部 a 元素关闭菜单时,确实正确调用了 closeNav 函数,但随后单击事件在 DOM 树中向上传播,到达 id 为“mySidenav”的父 id。
现在,div 也有一个注册的 onclick 处理程序,它也会被触发,所以你的 openNav 函数也会被调用。
您需要防止事件向上传播并到达 div,因此您可以使用 event.stopPropagation()。
看一下这个:
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav(event) {
event.stopPropagation();
document.getElementById("mySidenav").style.width = "0";
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 15px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.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;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="mySidenav" class="sidenav" onclick="openNav()" style="cursor: pointer;">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav(event)">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<h2>Animated Sidenav</h2>
我建议您在此处阅读有关事件冒泡的更多信息: https ://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
推荐阅读
- typescript - 使用 NuxtJS 和 AsyncData 方法从 URL 获取查询字符串值
- ffmpeg - 当我用 cygwin 构建 ffmpeg 时,会发生错误。我该如何解决这个问题?
- c# - 如何在c#中获取网站的所有内容而不仅仅是网页
- linux - Cordova wmic 命令失败
- c++ - 关于 SIGTSTP 错误和无休止的输入
- python-3.x - Chessboard-图像处理帧差
- python - Pandas - 按 3 列将分组导出到 JSON
- c# - 如何将 IQueryable 转换为自定义类列表?
- rust - Rust 语言是否支持非阻塞 IO?
- bash - 如何合并多个级别的所有目录?