Bootstrap导航栏Toggle按钮:active状态异常问题求助

问题说明 #

在Laravel项目中使用Bootstrap导航栏时，Toggle按钮无法保持预期样式：

• 预期：点击展开导航栏时按钮背景变红，收起时恢复黑色
• 当前问题：
  1. 使用:active伪类时，仅按住按钮时变红，松开立即恢复
  2. 使用:hover伪类时，点击后保持红色，但再次点击Toggle无法恢复，需点击导航栏外部才会变回

解决方案 #

1. 修正CSS样式 #

移除依赖:active/:hover的临时样式，改为通过自定义.active类控制状态，确保样式在导航栏展开/收起时稳定生效：

.header_style_01 {
    background-color: #2d3032;
    display: block;
    left: 0;
    padding: 15px 20px 5px !important;
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 111;
}

.navbar-default .navbar-toggle {
    border-color: #2d3032;
    color: #fff !important;
    background-color: #2d3032 !important;
}
/* 新增active类样式，控制展开时的红色背景 */
.navbar-default .navbar-toggle.active {
    background-color: #DD0000 !important;
    border-color: #DD0000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: transparent;
}

2. 优化JavaScript逻辑 #

移除冗余的点击事件与延时判断，直接利用Bootstrap Collapse组件的shown.bs.collapse和hidden.bs.collapse事件，精准控制按钮的.active类：

document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('toggle-button');
    const navbarCollapse = document.getElementById('navbar');

    // 导航栏展开完成时，给按钮添加active类
    navbarCollapse.addEventListener('shown.bs.collapse', function() {
        button.classList.add('active');
        button.setAttribute('aria-expanded', 'true');
    });

    // 导航栏收起完成时，移除按钮的active类
    navbarCollapse.addEventListener('hidden.bs.collapse', function() {
        button.classList.remove('active');
        button.setAttribute('aria-expanded', 'false');
    });
});

关键说明 #

• :active伪类的局限性：该伪类仅在元素被用户激活（如鼠标按住未松开）时生效，松开后立即失效，无法维持状态
• :hover伪类的局限性：仅在鼠标悬停时生效，点击按钮后若鼠标未离开按钮区域，样式会持续保留，不符合交互逻辑
• Bootstrap Collapse事件：shown.bs.collapse和hidden.bs.collapse事件会在导航栏展开/收起动画完成后触发，能准确同步按钮状态

内容的提问来源于stack exchange，提问作者Rock Sora