如何用纯Bootstrap CSS独立控制多个Read More折叠面板

嗨，这问题我熟！要让多个段落各自独立展开收起，核心就是给每一组展开/收起元素分配唯一的标识关联，让Bootstrap的collapse组件能精准识别目标，不会“一锅端”。下面给你一步步拆解实现方法：

核心思路 #

Bootstrap的collapse组件是通过data-bs-toggle和目标元素的ID来绑定的，只要每个段落对应独立的ID，触发按钮只指向自己的目标，就能实现独立控制。再结合自定义CSS来处理收起时的省略号、高度限制，以及按钮文字切换，完美适配需求。

完整实现代码 #

HTML结构

每个展开块都是独立的单元，注意每个段落的ID唯一，触发按钮的href对应到该ID：

<!-- 第一个展开/收起块 -->
<div class="summary-block">
  <p class="collapse" id="content-section-1">
    这里是第一段的长内容示例：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <a class="collapsed" data-bs-toggle="collapse" href="#content-section-1" role="button" aria-expanded="false" aria-controls="content-section-1"></a>
</div>

<!-- 第二个展开/收起块 -->
<div class="summary-block">
  <p class="collapse" id="content-section-2">
    这是第二段的长内容示例：Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <a class="collapsed" data-bs-toggle="collapse" href="#content-section-2" role="button" aria-expanded="false" aria-controls="content-section-2"></a>
</div>

<!-- 可以无限添加更多块，只要ID唯一即可 -->

CSS样式

把你提供的代码改成类选择器，这样能复用在所有块上，同时保留核心的收起状态样式：

/* 全局块样式 */
.summary-block { 
  font-size: 14px; 
  line-height: 1.5; 
  margin-bottom: 1.8rem; /* 给块之间留间距 */
}

/* 收起状态：限制高度+多行省略 */
.summary-block p.collapse:not(.show) { 
  height: 62px !important; 
  overflow: hidden; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; /* 显示2行后省略 */
  -webkit-box-orient: vertical; 
}

/* 过渡中的最小高度 */
.summary-block p.collapsing { 
  min-height: 42px !important; 
}

/* 按钮文字切换 */
.summary-block a.collapsed:after { 
  content: '+ Read More'; 
  color: #0d6efd; /* 用Bootstrap的主题色，统一风格 */
  cursor: pointer;
}

.summary-block a:not(.collapsed):after { 
  content: '- Read Less'; 
  color: #0d6efd;
  cursor: pointer;
}

关键注意点 #

1. 唯一ID是核心：每个collapse段落的ID必须独一无二，触发按钮的href（或data-bs-target）要精准匹配，这样点击时只会触发当前段落的状态切换。
2. 类选择器替代ID：把原来的#summary改成.summary-block类，避免ID只能用一次的限制，方便复用在多个块上。
3. 依赖Bootstrap基础：确保你已经引入了Bootstrap的CSS和JS（collapse组件需要JS来切换show/collapsed这些类，这是Bootstrap原生的功能，不算额外自定义JS）。

这样就能实现完全独立的展开/收起效果，每个段落的状态互不影响啦！

内容的提问来源于stack exchange，提问作者front.vis