单击事件时关闭菜单
[英]Close menu on click event
问题描述
我使用以下代码创建了一个从左侧滑入并覆盖整个屏幕的汉堡式菜单。 我的一些菜单链接是指向其他页面的常规链接，而另一些是指向主页下方的锚链接。 但是，当单击锚链接时，您可以看到滚动条已移至该部分，但菜单并未关闭。
我需要在脚本中添加什么（我假设它是脚本）才能实现这一点？
function openNav() { document.getElementById("mySidenav").style.width = "100%"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; }
body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; text-align: center; } .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; }
<body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="/home/">Home</a> <a href="/#services/">Services</a> <a href="/clients/">Clients</a> <a href="/contact/">Contact</a> </div> <h2>Animated Sidenav Example Full Width</h2> <p>Click on the element below to open the navigation menu.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> </body>
2 个解决方案
解决方案1
2 已采纳 2021-06-25 08:47:42
首先，我不知道它是否适合您，但是当您将href指向/#services/它不起作用，因此我建议您删除/并只使用href="#services" 。
接下来您要做的是在该特定锚点上添加onclick以关闭导航栏：
<a href="#services" onclick="closeNav()">Services</a>
以及完整的结果：
function openNav() { document.getElementById("mySidenav").style.width = "100%"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; }
body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; text-align: center; } .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; }
<body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="/home/">Home</a> <a href="#services" onclick="closeNav()">Services</a> <a href="/clients/">Clients</a> <a href="/contact/">Contact</a> </div> <h2>Animated Sidenav Example Full Width</h2> <p>Click on the element below to open the navigation menu.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <div id="services">HI THIS IS SERVICES</div> </body>
解决方案2
0 2021-06-25 08:42:32
侧边栏的默认状态最好是display:none并且有一个像.show这样的兄弟类，那么你需要的只是用 Javascript 切换.show类。
更改display是您可以使用的基本 CSS 属性，您还可以将position:absolute与位置属性一起使用，如top 、 bottom 、 left 、 right与过渡。
<div class="sidenav">
<button class="closebtn">
Close sidebar
</button>
...
</div>
.sidenav {
...
display: none;
}
.sidenav.show {
display: block;
}
const sidebar = document.querySelector('.sidebar');
const closebtn = document.querySelector('.closebtn');
closebtn.addEventListener('click', () => {
sidebar.classList.toggle('show');
});
单击事件后关闭汉堡菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.