javascript - 导航菜单不关闭
问题描述
我遇到了导航菜单的代码。这个导航菜单的问题是,当我点击任何菜单项时,菜单成功地将我们带到所需的链接,但不会自行关闭。这是一个覆盖导航菜单。与本帖相关的问题,请发表评论。并提前致谢!!
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay5').toggleClass('open');
});
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #fff;
}
.button_container.active .middle {
opacity: 0;
background: #fff;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #fff;
}
.button_container span {
background: #0087cc;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay5 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay5:before {
content: '';
background: black;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay5:after {
content: '';
background: black;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay5.open {
visibility: visible;
height: 100%;
}
.overlay5.open:before {
left: 0;
}
.overlay5.open:after {
right: 0;
}
.overlay5.open li {
animation: fadeInRight 0.5s ease forwards;
animation-delay: 0.35s;
}
.overlay5.open li:nth-of-type(2) {
animation-delay: 0.45s;
}
.overlay5.open li:nth-of-type(3) {
animation-delay: 0.55s;
}
.overlay5.open li:nth-of-type(4) {
animation-delay: 0.65s;
}
.overlay5 nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: 'Nova';
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay5 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay5 ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay5 ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
}
.overlay5 ul li a:hover:after,
.overlay5 ul li a:focus:after,
.overlay5 ul li a:active:after {
width: 100%;
}
.overlay5 ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #fff;
transition: 0.35s;
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay5" id="overlay5">
<nav class="overlay-menu">
<ul>
<li><a class="smoothscroll1" href="#">Home</a></li>
<li><a class="smoothscroll2" href="#about">About</a></li>
<li><a class="smoothscroll3" href="#work">Work</a></li>
<li><a class="smoothscroll4" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
解决方案
您没有任何代码告诉导航隐藏。我将此添加到您的js中:
$('a').click(function() {
$('#toggle').toggleClass('active');
$('#overlay5').toggleClass('open');
});
更好的方法是向所有基于导航的<a>
标签添加一个类,并选择该类而不是标签,因为您的项目的其他部分中<a>
可能有其他标签。<a>
所以这可能看起来像这样:
$('a.myClass').click(function() {
$('#toggle').toggleClass('active');
$('#overlay5').toggleClass('open');
});
然后您的 html 可能如下所示:
<li><a class="myClass smoothscroll1" href="#">Home</a></li>
<li><a class="myClass smoothscroll2" href="#about">About</a></li>
<li><a class="myClass smoothscroll3" href="#work">Work</a></li>
<li><a class="myClass smoothscroll4" href="#contact">Contact</a></li>
这是一个工作片段,显示了简化的<a>
标签选择版本:
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay5').toggleClass('open');
});
$('a').click(function() {
$('#toggle').toggleClass('active');
$('#overlay5').toggleClass('open');
});
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #fff;
}
.button_container.active .middle {
opacity: 0;
background: #fff;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #fff;
}
.button_container span {
background: #0087cc;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay5 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay5:before {
content: '';
background: black;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay5:after {
content: '';
background: black;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay5.open {
visibility: visible;
height: 100%;
}
.overlay5.open:before {
left: 0;
}
.overlay5.open:after {
right: 0;
}
.overlay5.open li {
animation: fadeInRight 0.5s ease forwards;
animation-delay: 0.35s;
}
.overlay5.open li:nth-of-type(2) {
animation-delay: 0.45s;
}
.overlay5.open li:nth-of-type(3) {
animation-delay: 0.55s;
}
.overlay5.open li:nth-of-type(4) {
animation-delay: 0.65s;
}
.overlay5 nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: 'Nova';
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay5 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay5 ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay5 ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
}
.overlay5 ul li a:hover:after,
.overlay5 ul li a:focus:after,
.overlay5 ul li a:active:after {
width: 100%;
}
.overlay5 ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #fff;
transition: 0.35s;
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay5" id="overlay5">
<nav class="overlay-menu">
<ul>
<li><a class="smoothscroll1" href="#">Home</a></li>
<li><a class="smoothscroll2" href="#about">About</a></li>
<li><a class="smoothscroll3" href="#work">Work</a></li>
<li><a class="smoothscroll4" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
这是更灵活、基于类的版本:
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay5').toggleClass('open');
});
$('a.myClass').click(function() {
$('#toggle').toggleClass('active');
$('#overlay5').toggleClass('open');
});
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #fff;
}
.button_container.active .middle {
opacity: 0;
background: #fff;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #fff;
}
.button_container span {
background: #0087cc;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay5 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay5:before {
content: '';
background: black;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay5:after {
content: '';
background: black;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay5.open {
visibility: visible;
height: 100%;
}
.overlay5.open:before {
left: 0;
}
.overlay5.open:after {
right: 0;
}
.overlay5.open li {
animation: fadeInRight 0.5s ease forwards;
animation-delay: 0.35s;
}
.overlay5.open li:nth-of-type(2) {
animation-delay: 0.45s;
}
.overlay5.open li:nth-of-type(3) {
animation-delay: 0.55s;
}
.overlay5.open li:nth-of-type(4) {
animation-delay: 0.65s;
}
.overlay5 nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: 'Nova';
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay5 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay5 ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay5 ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
}
.overlay5 ul li a:hover:after,
.overlay5 ul li a:focus:after,
.overlay5 ul li a:active:after {
width: 100%;
}
.overlay5 ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #fff;
transition: 0.35s;
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay5" id="overlay5">
<nav class="overlay-menu">
<ul>
<li><a class="myClass smoothscroll1" href="#">Home</a></li>
<li><a class="myClass smoothscroll2" href="#about">About</a></li>
<li><a class="myClass smoothscroll3" href="#work">Work</a></li>
<li><a class="myClass smoothscroll4" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
推荐阅读
- excel - 如何根据条件计算时差,即不同的字符串和新日期
- java - 比较 XML 文件时,如何使用 XMLUnit 2.8.2 获得详细响应
- html - Textarea 未对齐,因为 md-maxlength
- apache-spark - Pyspark 即使在其操作完成后也不会释放内存
- mysql - 通过 RAND() 和 LIMIT 选择行时防止重复
- angular - 如何以角度读取茉莉花测试中的模板驱动表单属性
- javascript - 检查我的内容前面是否有模态框?
- javascript - 如何使用把手从 json(外部 api)渲染数据嵌套对象
- python - 如何确保掩蔽层通过 Keras 的 LSTM-AE 中的其他层传播?
- openapi - Micronaut OpenAPI 和动态模式