如何将Bootstrap折叠面板按钮置于文本前并修改其样式

一、调整按钮布局 #

要实现标题文本左对齐、折叠按钮右对齐的布局，利用Bootstrap的d-flex和justify-content-between类实现标题栏的左右分布，将加减按钮独立封装为右侧的按钮元素：

二、修改按钮样式 #

通过自定义CSS覆盖默认样式，实现浅灰背景、圆角细边框、hover交互效果，配合JS监听折叠状态切换加减图标。

完整实现代码 #

<div class="accordion" id="customAccordion">
  <!-- 折叠项1 -->
  <div class="accordion-item">
    <h2 class="accordion-header d-flex justify-content-between align-items-center" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        折叠面板标题1
      </button>
      <!-- 自定义加减按钮 -->
      <button class="collapse-toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        <span class="icon">+</span>
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#customAccordion">
      <div class="accordion-body">
        折叠面板内容1...
      </div>
    </div>
  </div>

  <!-- 折叠项2 -->
  <div class="accordion-item">
    <h2 class="accordion-header d-flex justify-content-between align-items-center" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        折叠面板标题2
      </button>
      <button class="collapse-toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        <span class="icon">+</span>
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#customAccordion">
      <div class="accordion-body">
        折叠面板内容2...
      </div>
    </div>
  </div>
</div>

<style>
/* 隐藏原生折叠按钮的默认图标 */
.accordion-button::after {
  display: none;
}

/* 自定义折叠按钮样式 */
.collapse-toggle-btn {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #666;
  transition: all 0.2s ease;
  padding: 0;
}

.collapse-toggle-btn:hover {
  background-color: #e9ecef;
  border-color: #ccc;
  color: #333;
}
</style>

<script>
// 监听折叠状态切换图标
document.querySelectorAll('.accordion-collapse').forEach(collapse => {
  collapse.addEventListener('show.bs.collapse', function() {
    this.previousElementSibling.querySelector('.collapse-toggle-btn .icon').textContent = '-';
  });
  collapse.addEventListener('hide.bs.collapse', function() {
    this.previousElementSibling.querySelector('.collapse-toggle-btn .icon').textContent = '+';
  });
});
</script>

关键说明 #

1. 布局层面：用d-flex justify-content-between align-items-center实现标题栏内容的左右对齐与垂直居中
2. 样式层面：通过自定义类定义按钮的圆角、边框、背景色及hover效果，隐藏原生折叠按钮的默认图标
3. 交互层面：监听Bootstrap折叠组件的show.bs.collapse和hide.bs.collapse事件，切换按钮内的加减图标

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