javascript - 点击事件关闭菜单
问题描述
我使用以下代码创建了一个汉堡式菜单,该菜单从左侧滑入并覆盖整个屏幕。我的一些菜单链接是指向其他页面的常规链接,而另一些则是指向主页下方的锚链接。但是,当单击锚链接时,您可以看到滚动条已转到该部分,但菜单并未关闭。
我需要在脚本中添加什么(我假设是脚本)才能实现这一点?
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>
解决方案
首先,我不知道它是否适合您,但是当您href
使用它时/#services/
它不起作用,所以我建议您放弃/
and just 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>
推荐阅读
- visual-studio-code - 如何将 devcontainer 挂载到 $HOME
- sharepoint - 如何将 DataCardValue 链接到另一个视图
- swift - 如何从 firebase 检索数据并显示特定数据?
- powerbi - Power BI 比较销售报告
- reactjs - 减少嵌套数组
- css - 如何以可读格式打开css文件
- assembly - 从 eax 到 rax 寄存器的转换
- c++ - Code Endless 写入文本文件的第一行
- python - 需要为新终端运行“source .bash”以获得正确的 python 路径
- c# - 如何在 ASP.NET Core 3.0 中禁用默认日志记录