javascript - 汉堡菜单有效,但在我点击菜单链接后它消失了
问题描述
我遇到的问题是我的汉堡菜单。我有一个单页网站,因此导航中的链接会转到页面中的某个部分。当我单击汉堡菜单时,它会打开我的导航,当我单击任何链接时,导航会转到正确的位置并关闭我想要的位置,但汉堡菜单会一起消失。如何让菜单在点击链接时消失,但让汉堡菜单回到原来的状态并可以再次点击?这是我的个人投资组合项目,我对 jquery 还是新手。任何帮助,将不胜感激。
这是我的 HTML:
<div class="menu-section">
<div class="menu-toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<nav>
<ul role="navigation" class="hidden">
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
这是我的CSS:
.menu-toggle.on .one {
-moz-transform: rotate(45deg) translate(7px, 7px);
-ms-transform: rotate(45deg) translate(7px, 7px);
-webkit-transform: rotate(45deg) translate(7px, 7px);
transform: rotate(45deg) translate(7px, 7px);
}
.menu-toggle.on .two {
opacity: 0;
}
.menu-toggle.on .three {
-moz-transform: rotate(-45deg) translate(8px, -10px);
-ms-transform: rotate(-45deg) translate(8px, -10px);
-webkit-transform: rotate(-45deg) translate(8px, -10px);
transform: rotate(-45deg) translate(8px, -10px);
}
.one,
.two,
.three {
width: 100%;
height: 5px;
background: @color2;
margin: 6px auto;
backface-visibility: hidden;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
nav ul {
margin: 0;
padding: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: 'Ubuntu', sans-serif;
list-style: none;
text-align: center;
width: 100%;
}
nav ul.hidden {
display: none;
}
nav ul a {
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
text-decoration: none;
color: @color2;
font-size: 2.5em;
line-height: 1.5;
width: 100%;
display: block;
font-family: 'Ubuntu' sans-serif;
}
nav ul a:hover {
background-color: rgba(0, 0, 0, 0.5);
background-color: @color4;
}
.menu-section.on {
z-index: 10;
width: 100%;
height: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.75);
position: absolute;
}
这是我的jQuery:
$(document).ready(function () {
$('.menu-toggle').click(function (e) {
$(this).toggleClass('on');
$('.menu-section').toggleClass('on');
$('nav ul').toggleClass('hidden');
e.preventDefault();
});
$('nav ul a').click(function () {
$('.menu-section').hide();
});
});
解决方案
实际上 jQuery 的.hide()
方法将目标元素的显示设置为无。
$('nav ul a').click(function () {
$('.menu-section').hide();
});
您需要做的是切换.menu-section
元素上的“on”类,并将其他所有内容切换回初始状态:
$('nav ul a').click(function () {
$('.menu-toggle').toggleClass('on');
$('.menu-section').toggleClass('on');
$('nav ul').toggleClass('hidden');
});
推荐阅读
- apache-spark - 如何在 Google Dataproc 工作节点上缓存数据
- c# - 如何在 webform 中实现 ASP.NET Identity 中的角色
- docker - 使用 docker build 可以很好地构建图像,但是 stat /GO/src/main: 使用 docker-compose 时没有遇到这样的文件或目录
- java - 为什么在 setText 中使用整数值时程序会崩溃?
- python - 如何在 python OpenCV 3 中对图像的某个区域进行图像处理?
- javascript - 通过代码和终端运行 Node 脚本承诺
- c# - 为什么选择了多个 CheckBoxList 中的值,即使我用 ID 指定了一个
- shell - Shell - 将字符串放入向量中会出现奇怪的空格行为
- r - 从计数数据生成数据框
- neo4j - Neo4j - 为什么探查器在全扫描节点的情况下只显示 2000003 db 命中?