[英]CSS class selector toggle using javascript
我是 web 开发和尝试创建投资组合网站的新手。 我正在尝试创建一个整页导航栏。 我正在使用引导程序 5,当我单击右侧的按钮时导航栏工作,但我想在选择菜单项时自动关闭导航栏。 我用不同的部分在一个身体中创造一切。
HTML
<nav class="navbar fixed-top navbar-expand-lg">
<div class="container">
<a onclick="openMenu();" title="" class="btn">
<span></span>
<span></span>
</a>
<div class="menu">
<ul class="menu_list">
<li class="menu_list">
<a href="#home" title="" onclick="closeMenu();" class="menu_link">Home</a>
</li>
<li class="menu_list">
<a href="#about-me" title="" onclick="closeMenu();" class="menu_link">About</a>
</li>
<li class="menu_list">
<a href="#projects" title="" onclick="closeMenu();" class="menu_link">Projects</a>
</li>
<li class="menu_list">
<a href="#contact" title="" onclick="closeMenu();" class="menu_link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
.btn{
position: absolute;
top: 21px;
right: 25px;
z-index: 3;
display: flex;
width: 20px;
height: 20px;
}
/*size of the button lines*/
.btn span{
position: absolute;
display: flex;
width: 20px;
height: 2px;
background: rgba(247,72,78,255);
transition: .5s;
}
/*position of each line within the button space*/
.btn span:nth-child(1){
top: 25%;
}
.btn span:nth-child(2){
top: 75%;
}
.btn.is-active span{
background: rgba(247,72,78,255);
}
/*transformation to X*/
.btn.is-active span:nth-child(1){
top: 50%;
transform: rotate(-45deg);
}
.btn.is-active span:nth-child(2){
top: 50%;
transform: rotate(45deg);
}
/*menu details*/
.menu {
background: rgb(0, 0, 0,0.60);
display: flex;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 100px;
z-index: 1;
transform: .5s;
opacity: 0;
visibility: hidden;
}
/*when active (clicked)*/
.menu.is-active{
transition: .5s;
opacity: 1;
visibility: visible;
}
javascript:open menu() 工作正常,在使用 btn 打开或关闭菜单时使用。 closeMenu() 是我遇到的困难。 我尝试进行选择并从 is-active 切换回 to.menu,但它不起作用。
function openMenu(e){
let menu = document.querySelector('.menu');
let btn = document.querySelector('.btn');
menu.classList.toggle('is-active');
btn.classList.toggle('is-active');
e.preventDefault();
}
function closeMenu(){
let menu = document.querySelector('.menu.is-active');
let btn = document.querySelector('.btn.is-active');
menu.classList.toggle('.menu');
btn.classList.toggle('.btn');
e.preventDefault();
}
任何帮助表示赞赏。
也许这个 网站可以帮助你。
在 function closeMenu()
中, menu
和btn
变量应在没有 .is .is-active
.is-active
class 的情况下选择,然后您可以切换 class 。
function closeMenu(){
let menu = document.querySelector('.menu');
let btn = document.querySelector('.btn');
menu.classList.toggle('is-active');
btn.classList.toggle('is-active');
e.preventDefault();
}
你应该删除。 从最后 2 行开始。
function closeMenu(){
let menu = document.querySelector('.menu.is-active');
let btn = document.querySelector('.btn.is-active');
menu.classList.toggle('menu');
btn.classList.toggle('btn');
e.preventDefault();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.