Bootstrap导航栏随Offcanvas菜单变色异常：点击DOM误触发颜色变更求助

核心问题分析 #

你当前的代码存在两个关键问题：

1. 类判断逻辑错误：navBar.classList.contains('showing' || 'show')的写法不符合JavaScript语法，||运算符会优先返回第一个真值'showing'，导致代码只会检查showing类，完全忽略show类，状态判断不准确。
2. 全局click事件误触发：监听document的点击事件会导致页面任何区域的点击都触发回调，哪怕点击菜单内部（此时菜单并未关闭），也会执行颜色修改逻辑，引发误触发。

推荐解决方案：使用Offcanvas组件内置事件（精准可靠） #

如果你的Offcanvas是基于Bootstrap实现的，直接利用组件提供的show.bs.offcanvas（菜单开始显示时）和hide.bs.offcanvas（菜单开始隐藏时）事件，能精准捕获菜单状态变化，避免误触发：

const navBar = document.querySelector("#offcanvas-navbar");
const fixedTop = document.querySelector("body > nav");

// 菜单打开时设置背景色
navBar.addEventListener('show.bs.offcanvas', () => {
    fixedTop.style.backgroundColor = '#ff2fac';
});

// 菜单关闭时恢复原背景色
navBar.addEventListener('hide.bs.offcanvas', () => {
    fixedTop.style.backgroundColor = '#adff2f';
});

备选方案：修复全局click事件（适配自定义Offcanvas） #

如果你的Offcanvas是自定义实现的，可修复原逻辑，仅在菜单状态真正变化时修改颜色：

const navBar = document.querySelector("#offcanvas-navbar");
const fixedTop = document.querySelector("body > nav");

document.addEventListener('click', e => {
    // 正确判断菜单是否处于打开状态
    const isMenuOpen = navBar.classList.contains('show') || navBar.classList.contains('showing');
    
    if (isMenuOpen) {
        // 菜单打开时保持目标颜色
        fixedTop.style.backgroundColor = '#ff2fac';
        // 若点击的是菜单内部或触发按钮，阻止事件冒泡避免误判
        if (navBar.contains(e.target) || e.target.matches('[data-toggle="offcanvas"]')) {
            return;
        }
    } else {
        // 菜单关闭时恢复原颜色
        fixedTop.style.backgroundColor = '#adff2f';
    }
});

关键说明 #

• 优先使用组件内置事件，这是框架原生提供的状态监听方式，比全局click事件更稳定、精准。
• 自定义Offcanvas场景下，要确保show/showing类确实是菜单打开时添加的类名，若类名不同需对应修改。

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