javascript - 单击时如何关闭覆盖锚链接菜单?
问题描述
我的问题是,当我打开汉堡菜单并单击导航链接时,它确实将我带到了锚链接部分,但覆盖导航菜单不会关闭!
我确实尝试过关闭 css 类并将类切换到 jquery nav,但它也不起作用。
我的 HTML 代码是:
$(document).ready(function() {
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#fullnav').toggleClass('open');
});
});
$(document).ready(function() {
$('.hamburger-menu').click(function() {
$(this).toggleClass('change');
})
});
.fullnav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333333;
z-index: 100;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.hamburger-menu {
width: 45px;
height: 35px;
position: fixed;
top: 40px;
right: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 500;
}
.line {
width: inherit;
height: 5px;
background-color: #7A7A7A;
border-radius: 25px;
transform-origin: right;
transition: transform .5s;
}
.line-2 {
height: 3px;
}
.change .line-1 {
transform: translate(-4px, -4px) rotateZ(-45deg);
}
.change .line-2 {
opacity: 0;
}
.change .line-3 {
transform: translate(-4px, -3px) rotateZ(45deg);
}
.fullnav.open {
opacity: 1;
visibility: visible;
height: 100%;
}
.fullnav.close {
opacity: 0;
visibility: visible;
height: 0%;
}
.fullnav.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.fullnav.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.fullnav.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.fullnav.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.fullnav nav {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 3rem;
font-family: Montserrat-Light;
font-weight: 400;
line-height: 7rem;
text-align: center;
}
.fullnav ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.fullnav ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 1;
}
.fullnav ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.fullnav ul li a:hover:after,
.fullnav ul li a:focus:after,
.fullnav ul li a:active:after {
width: 100%;
}
.fullnav ul li a:hover::before,
.fullnav ul li a:focus::before,
.fullnav ul li a:active::before {
width: 100%;
}
.fullnav ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrapper">
<div class="hamburger-menu" id="toggle">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<div class="fullnav" id="fullnav">
<nav class="fullnavMenu" id="fullnavMenu">
<ul>
<li><a href="#a">About</a></li>
<li><a href="#b">Skills</a></li>
<li><a href="#c">Projects</a></li>
<li><a href="#d">Contact</a></li>
</ul>
</nav>
</div>
</div>
此关闭覆盖导航菜单的代码不起作用。请帮我修复它:
$(document).ready(function () {
$('fullnav').hide();
});
解决方案
将单击事件处理程序绑定到链接。在这个偶数处理程序中,删除定义菜单打开状态的类。
$("#toggle").click(function() {
$(this).toggleClass("active");
$("#fullnav").toggleClass("open");
});
$(".hamburger-menu").click(function() {
$(this).toggleClass("change");
});
$("#fullnavMenu a").on("click", function() {
$(".hamburger-menu").removeClass("change");
$("#toggle").removeClass("active");
$("#fullnav").removeClass("open");
});
.fullnav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333333;
z-index: 100;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.hamburger-menu {
width: 45px;
height: 35px;
position: fixed;
top: 40px;
right: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 500;
}
.line {
width: inherit;
height: 5px;
background-color: #7A7A7A;
border-radius: 25px;
transform-origin: right;
transition: transform .5s;
}
.line-2 {
height: 3px;
}
.change .line-1 {
transform: translate(-4px, -4px) rotateZ(-45deg);
}
.change .line-2 {
opacity: 0;
}
.change .line-3 {
transform: translate(-4px, -3px) rotateZ(45deg);
}
.fullnav.open {
opacity: 1;
visibility: visible;
height: 100%;
}
.fullnav.close {
opacity: 0;
visibility: visible;
height: 0%;
}
.fullnav.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.fullnav.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.fullnav.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.fullnav.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.fullnav nav {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 3rem;
font-family: Montserrat-Light;
font-weight: 400;
line-height: 7rem;
text-align: center;
}
.fullnav ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.fullnav ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 1;
}
.fullnav ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.fullnav ul li a:hover:after,
.fullnav ul li a:focus:after,
.fullnav ul li a:active:after {
width: 100%;
}
.fullnav ul li a:hover::before,
.fullnav ul li a:focus::before,
.fullnav ul li a:active::before {
width: 100%;
}
.fullnav ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrapper">
<div class="hamburger-menu" id="toggle">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<div class="fullnav" id="fullnav">
<nav class="fullnavMenu" id="fullnavMenu">
<ul>
<li><a href="#a">About</a></li>
<li><a href="#b">Skills</a></li>
<li><a href="#c">Projects</a></li>
<li><a href="#d">Contact</a></li>
</ul>
</nav>
</div>
推荐阅读
- python - 如何在python中计算面部标志的瞳孔间距和眼间距
- python - python - 如何使用pandas和/或plotly在Python中每x行创建新表?
- c - execl 找不到 vim
- javascript - 滚动时到达不同的div元素后如何更改导航图像
- c# - 检查文本框中的否定输入
- wordpress - 如何根据 woocommerce 中的订单总数更改电子邮件发件人?
- javascript - 如何将嵌套对象“解包”为数组?
- python - 使用 ansible-runner 作为 Python 模块接口到 Ansible 错误:RunnerConfig' 对象没有属性 'command'
- arrays - Python函数有一个新的数组
- docker - 无法在 snap docker 19.03 中启用实验性