如何在保留展开/折叠功能的同时实现动态数据连接虚线

要同时实现Bootstrap折叠功能和数据项之间的动态虚线（仅作为项间连接、不覆盖内容），核心是将虚线绑定到展开状态下的相邻数据项，而非折叠容器本身。以下是可行的实现方案：

核心逻辑 #

• 仅在折叠容器处于展开状态（.collapse.show）时显示虚线
• 虚线仅出现在同级数据项之间，最后一个数据项下方不生成虚线
• 调整虚线定位，确保其位于两个数据项的间隙中，不覆盖内容

修改后的代码 #

CSS #

.flex {
  display: flex;
  justify-content: space-between;
  position: relative; /* 为伪元素提供定位基准 */
  margin-top: 5px;
  margin-left: 15px;
}

/* 仅在展开的容器内，给非最后一个数据项添加下方虚线 */
.collapse.show .flex:not(:last-child)::after {
  content: '';
  position: absolute;
  width: calc(100% - 30px); /* 匹配数据项左右边距，避免超出范围 */
  top: calc(100% + 2px); /* 放在数据项下方，留出间隙 */
  left: 15px; /* 对齐数据项左侧缩进 */
  height: 2px;
  color: lightgrey;
  background-image: linear-gradient(to right, currentColor 2px, transparent 1px);
  background-size: 4px 2px;
}

.DataRightAlign {
  word-wrap: break-word;
  white-space: break-spaces;
  margin-right: 20px;
  margin-left: 10px;
  color: black;
}

/* 折叠容器基础样式，移除原伪元素定义 */
.lev1, .lev2, .lev3 {
  margin-top: 5px;
}

HTML #

<!-- 引入Bootstrap 4的CSS及JS依赖 -->

<div class="itemDiv">
  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev1"> Set1 </a>
    <div class="collapse multi-collapse lev1 show">
      <p class="flex">
        <span>item1data</span>
        <span class="DataRightAlign"> Set1val here</span>
      </p>
      <p class="flex">
        <span>item2</span>
        <span class="DataRightAlign">Set1</span>
      </p>
    </div>
  </div>

  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev3">Set2 </a>
    <div class="collapse multi-collapse lev3 show">
      <p class="flex">
        <span>item3</span>
        <span class="DataRightAlign">Set2val</span>
      </p>
    </div>
  </div>
</div>

关键修改说明 #

1. 转移虚线载体：移除原代码中绑定在折叠容器上的伪元素，改为绑定到数据项（.flex），避免折叠后容器残留虚线
2. 条件控制显示：通过.collapse.show选择器，确保仅当容器展开时才渲染虚线，折叠时自动隐藏
3. 精准定位调整：使用calc()计算虚线的宽度和位置，使其刚好在两个数据项之间，不覆盖内容也不超出边界
4. 排除末尾项：通过:not(:last-child)选择器，避免最后一个数据项下方出现多余虚线

修改后，点击Set1/Set2切换展开/折叠状态时，虚线会跟随数据项的显示/隐藏动态变化，完全符合需求。

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