如何实现点击按钮后下拉菜单保持展开状态？

嘿，我看了你的代码，一下子就找到问题所在啦！你的下拉菜单之所以闪一下就关闭，核心原因是你用了CSS的:active伪类来控制菜单展开——这个伪类只有鼠标按住按钮的时候才生效，松开鼠标它就失效了，自然菜单就收回去了。咱们来一步步修复：

第一步：把CSS里的:active替换成持久的类 #

把所有控制菜单展开的:active伪类换成.active类，这样只有当我们用JS给元素加上这个类时，菜单才会保持展开：

修改后的关键CSS代码片段：

/* 替换原来的.nav-list li:active>.sub-menu */
.nav-list li.active > .sub-menu {
    top: 8rem;
    opacity: 1;
    visibility: visible;
}

/* 替换原来的.sub-menu li:active>.sub-menu */
.sub-menu li.active > .sub-menu {
    top: 0;
    left: 100%;
}

/* 移动端的子菜单也要改 */
@media screen and (max-width: 900px) {
    /* 替换原来的.nav-list li:active > .sub-menu */
    .nav-list li.active > .sub-menu {
        opacity: 1;
        visibility: visible;
        max-height: initial;
    }
}

第二步：用JavaScript控制下拉菜单的展开/收起 #

现在需要给带有子菜单的链接添加点击事件，切换父元素的active类，同时阻止链接的默认跳转行为（避免页面刷新）：

更新后的JS代码：

let menu_icons = document.querySelector('.menu-icons'),
nav = document.querySelector('nav');

// 控制汉堡菜单的展开/收起
menu_icons.addEventListener('click', () => {
    nav.classList.toggle('active');
});

// 控制下拉子菜单的展开/收起
const dropdownLinks = document.querySelectorAll('.nav-list li:has(.sub-menu) a');
dropdownLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        // 阻止链接默认跳转行为
        e.preventDefault();
        // 切换父li元素的active类
        const parentLi = link.closest('li');
        parentLi.classList.toggle('active');
        
        // 如果需要点击其他菜单时关闭当前菜单，可以加上这段（可选）
        // dropdownLinks.forEach(otherLink => {
        //     const otherLi = otherLink.closest('li');
        //     if (otherLi !== parentLi) {
        //         otherLi.classList.remove('active');
        //     }
        // });
    });
});

第三步：可选优化——点击页面其他区域关闭菜单 #

如果想要点击页面空白处时关闭所有展开的菜单，可以再加一段代码：

document.addEventListener('click', (e) => {
    // 判断点击的区域不是菜单按钮和菜单本身
    if (!menu_icons.contains(e.target) && !nav.contains(e.target)) {
        nav.classList.remove('active');
        // 关闭所有下拉子菜单
        document.querySelectorAll('.nav-list li.active').forEach(li => {
            li.classList.remove('active');
        });
    }
});

这样修改后，你的下拉菜单点击后就会保持展开状态，再次点击就会收起啦！测试一下应该就没问题了～

备注：内容来源于stack exchange，提问作者Lozinator