如何修改Bootstrap折叠面板（collapse）展开时的背景色？

开发者阿泽

2026-5-8

解决折叠面板展开/收起时背景色不同的问题

我明白你遇到的问题了——直接修改.collapse的背景色没效果，主要是两个原因：

Bootstrap的折叠组件在展开时会自动给.collapse元素添加.show类，你之前的CSS没有区分展开/收起状态；
折叠区域内部的.list-group-item默认带有白色背景，会覆盖父容器的背景色。

下面给你两种可行的解决方案：

方案一：全局适配所有折叠面板

/* 收起状态的折叠区域背景（可根据需求调整） */
.collapse {
  background-color: #f8f9fa; /* 匹配Bootstrap默认面板的浅灰色 */
}

/* 展开状态的折叠区域背景 */
.collapse.show {
  background-color: #fff3cd; /* 你需要的浅黄色，可替换成任意颜色 */
}

/* 让折叠区域内的列表项背景透明，继承父容器的背景 */
.collapse .list-group-item {
  background-color: transparent;
  border-left: none; /* 可选：去掉左侧边框，让背景更连贯 */
  border-right: none;
}

方案二：仅适配你的`#MainMenu`面板（避免影响其他组件）

如果你只想修改这个侧边菜单的折叠面板，用更精准的选择器：

/* 收起状态的菜单折叠区域 */
#MainMenu .panel .collapse {
  background-color: #f8f9fa;
}

/* 展开状态的菜单折叠区域 */
#MainMenu .panel .collapse.show {
  background-color: yellow;
}

/* 让菜单折叠区域内的列表项背景透明 */
#MainMenu .panel .collapse .list-group-item {
  background-color: transparent;
  border-left: 0;
  border-right: 0;
}