使用 javascript 切换 CSS 类选择器答案

【问题标题】：CSS class selector toggle using javascript使用 javascript 切换 CSS 类选择器
【发布时间】：2022-01-21 07:51:51
【问题描述】：

我是网络开发的新手，正在尝试创建一个投资组合网站。我正在尝试创建一个整页导航栏。我正在使用引导程序 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 切换回 .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();
}

感谢任何帮助。

【问题讨论】：

既然你使用不同的函数来打开和关闭，为什么不在打开的时候加上is-active，在关闭的时候去掉呢？这比使用切换更好。

标签： javascript html jquery css menu

【解决方案1】：

在closeMenu()函数中，menu和btn变量应该在没有.is-active类的情况下被选中，然后你可以切换.is-active类

 function closeMenu(){
        let menu = document.querySelector('.menu');
        let btn = document.querySelector('.btn');
        menu.classList.toggle('is-active');
        btn.classList.toggle('is-active');
        
        e.preventDefault();
    }

【讨论】：

非常感谢。在过去的 3 个小时里，我一直坚持这一点，不敢相信我不得不再次重用相同的代码。如果你不介意，你能解释一下它背后的逻辑吗？因为我认为当我点击它时，当前实例是活动的，所以要切换回来我必须选择 -.menu-is-select 并切换回 .menu。

【解决方案2】：

您应该只删除 .从最后 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();
}

【讨论】：