如何实现Bootstrap3逆导航栏点击切换按钮时动态切换背景图

我来帮你搞定这个问题！你之前遇到的style.backgroundImage为空的情况，是因为背景图写在外部CSS里，不属于元素的内联样式，所以直接拿不到。其实不用自己去判断样式状态，利用Bootstrap折叠组件自带的事件或者CSS类切换，就能完美实现需求，而且更可靠。

推荐方案：利用Bootstrap折叠事件控制样式 #

这个方法完全贴合Bootstrap的原生行为，不管用户是点击按钮还是用键盘触发折叠，都能精准响应：

第一步：修改CSS，添加切换类 #

先给导航栏加一个用于移除背景图的自定义类，这样我们只需要切换这个类就能控制背景显示：

.navbar.navbar-inverse {
    background: url('../images/banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1% 0 1% 0;
}

/* 新增：移除背景图的类，可按需设置折叠时的背景色 */
.navbar.navbar-inverse.no-bg {
    background: none;
    background-color: #222; /* 和navbar-inverse默认背景色一致，避免突兀 */
}

.navbar-inverse .navbar-nav > li > a { 
    color: white; 
} 
a:hover { 
    background-color: black; 
}

第二步：调整HTML，移除冗余的onclick #

把按钮上的onclick="menuclick()"删掉，我们用事件监听来处理，更符合前端最佳实践：

<div class="navbar navbar-inverse navbar-fixed-top" id="navbar"> 
    <div class="container"> 
        <div class="navbar-header"> 
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
            </button> 
        </div> 
        <div class="navbar-collapse collapse"> 
            <ul class="nav navbar-nav navbar-right"> 
                <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                <li>@Html.ActionLink("About", "About", "Home")</li> 
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
            </ul> 
        </div> 
    </div> 
</div>

第三步：添加JavaScript监听折叠事件 #

监听Bootstrap折叠组件的show.bs.collapse（展开时）和hide.bs.collapse（折叠时）事件，动态添加/移除no-bg类：

// 等页面DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
    const collapseMenu = document.querySelector('.navbar-collapse');
    const navbar = document.getElementById('navbar');
    
    // 导航栏展开时，移除背景图
    collapseMenu.addEventListener('show.bs.collapse', function() {
        navbar.classList.add('no-bg');
    });
    
    // 导航栏折叠时，恢复背景图
    collapseMenu.addEventListener('hide.bs.collapse', function() {
        navbar.classList.remove('no-bg');
    });
});

备选方案：修复你原来的onclick思路（不推荐） #

如果你坚持想用按钮的点击事件，也可以调整代码，但这个方法不如事件监听可靠，因为Bootstrap的折叠状态切换是异步的：

首先还是要加上面的.no-bg CSS类，然后修改你的menuclick函数：

function menuclick() {
    const nav = document.getElementById('navbar');
    const collapseMenu = document.querySelector('.navbar-collapse');
    
    // 判断当前导航栏是否展开（Bootstrap给展开的容器加了.in类）
    const isExpanded = collapseMenu.classList.contains('in');
    
    if (isExpanded) {
        // 展开状态下点击，会折叠，所以恢复背景图
        nav.classList.remove('no-bg');
    } else {
        // 折叠状态下点击，会展开，所以移除背景图
        nav.classList.add('no-bg');
    }
}

为什么你之前拿不到backgroundImage？ #

简单说，element.style只能获取写在元素style属性里的内联样式，而你的背景图是在外部CSS文件中定义的，所以nav.style.backgroundImage会是空字符串。如果非要获取计算后的样式，可以用window.getComputedStyle(nav).backgroundImage，但这种方式不如用类切换直观好维护。

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