如何为Bootstrap 4手风琴设置展开/折叠状态下的标题样式？

嘿，这个需求其实很好实现，Bootstrap 4的手风琴组件已经内置了状态标识，我们只需要针对对应的类或者属性写CSS就搞定了。下面给你拆解具体怎么做：

核心思路：抓住状态标记元素 #

Bootstrap 4手风琴在切换展开/折叠时，会给两个关键元素添加状态标记：

• 展开的手风琴项对应的.card元素会加上.show类
• 触发标题的按钮（.btn-link）的aria-expanded属性会在true（展开）和false（折叠）之间动态切换

我们可以针对这两个标记写样式，两种方法任选其一：

方法1：利用.show类（依赖父级状态） #

这种方法通过父级.card的.show类判断展开状态，写法简单直接：

/* 折叠状态：标题文字设为灰色 */
.card-header .btn-link {
  color: #888;
}

/* 展开状态：标题文字设为红色 */
.card.show .card-header .btn-link {
  color: #dc3545; /* 这里用了Bootstrap内置的danger红色，也可以替换成自定义色值 */
}

方法2：利用aria-expanded属性选择器（更直观） #

直接针对触发按钮的aria-expanded属性写样式，不需要依赖父级元素，可读性更强：

/* 折叠状态（aria-expanded="false"） */
.card-header .btn-link[aria-expanded="false"] {
  color: #888;
}

/* 展开状态（aria-expanded="true"） */
.card-header .btn-link[aria-expanded="true"] {
  color: #dc3545;
  /* 还可以加额外样式，比如加粗、背景色 */
  font-weight: 600;
  background-color: #f8f9fa;
}

完整可运行示例 #

下面是包含HTML结构、CSS样式和必要Bootstrap脚本的完整示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          手风琴项 1（默认展开）
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        这是展开状态的内容，标题现在是红色哦～
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          手风琴项 2（默认折叠）
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        点击标题展开后，文字会变成红色！
      </div>
    </div>
  </div>
</div>

<style>
/* 自定义手风琴标题样式 */
.card-header .btn-link[aria-expanded="false"] {
  color: #888;
}

.card-header .btn-link[aria-expanded="true"] {
  color: #dc3545;
  font-weight: 600;
}
</style>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

小提醒 #

• 确保你的自定义CSS写在Bootstrap CSS之后，这样样式优先级足够，不需要加!important
• 如果要修改标题的背景色，直接在对应的选择器里添加background-color属性就行

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