我有一个Bootstrap的 列表组，正为它应用一个 折叠 效果。除了动画里有一处卡顿，一切都运行正常：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<div class="list-group">
  <a class="list-group-item list-group-item-action" href="#collapser" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapser">Here's the trigger</a>
  <div class="list-group-item collapse" id="collapser">Here's the collapsing content</div>
  <span class="list-group-item list-group-item-action">Here's another item</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

显然 这个问题的原因在于元素的内边距；CSS会对高度从0 变为目标高度的过程中进行动画，但随后一次性处理剩余的内边距。

果不其然，如果我把项包裹在一个div里，动画就会平滑：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<div class="list-group">
  <a class="list-group-item list-group-item-action" href="#collapser" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapser">Here's the trigger</a>
  <div class="collapse" id="collapser">
    <div class="list-group-item">Here's the collapsing content</div>
  </div>
  <span class="list-group-item list-group-item-action">Here's another item</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

现在的问题是在折叠项周围出现了双边框。清除顶部边框的Bootstrap规则作用于 .list-group-item + .list-group-item，因此这个额外的div影响了它。我也尝试用同样的方式隐藏边框：

/* remove border on item following collapse */
.list-group div.collapse + .list-group-item {
  border-top-width: 0;
}

/* remove border on item inside collapse (I know there will always be another item above it) */
.list-group div.collapse > .list-group-item {
  border-top-width: 0;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<div class="list-group">
  <a class="list-group-item list-group-item-action" href="#collapser" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapser">Here's the trigger</a>
  <div class="collapse" id="collapser">
    <div class="list-group-item">Here's the collapsing content</div>
  </div>
  <span class="list-group-item list-group-item-action">Here's another item</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

这已经非常接近完美，只是在动画过程中仍会出现双边框。我不确定原因，因为边框宽度在项是显示还是隐藏时并不会改变。如何一次性彻底去掉这个边框？

解决方案

你的CSS需要同时作用于与 div.collapse 和 div.collapsing 相关的元素

使用浏览器的DOM检查器，你可以看到在动画进行时，collapse 类被移除，collapsing 类被添加到折叠或展开的元素上。动画完成后，collapse 类会重新添加到该元素，collapsing 类被移除。因此，用来强制 border-top-width: 0 的CSS hack需要应用于具有 collapse 或 collapsing 类的元素。

/* remove border on item following collapse */
.list-group div.collapse + .list-group-item,
.list-group div.collapsing + .list-group-item {
  border-top-width: 0;
}

/* remove border on item inside collapse (I know there will always be another item above it) */
.list-group div.collapse > .list-group-item,
.list-group div.collapsing > .list-group-item {
  border-top-width: 0;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<div class="list-group">
  <a class="list-group-item list-group-item-action" href="#collapser" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapser">Here's the trigger</a>
  <div class="collapse" id="collapser">
    <div class="list-group-item">Here's the collapsing content</div>
  </div>
  <span class="list-group-item list-group-item-action">Here's another item</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

使用 :is() 的更紧凑的CSS

/* remove border on item following collapse and on item inside collapse (I know there will always be another item above it) */
.list-group div:is(.collapse,.collapsing) + .list-group-item,
.list-group div:is(.collapse,.collapsing) > .list-group-item {
  border-top-width: 0;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<div class="list-group">
  <a class="list-group-item list-group-item-action" href="#collapser" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapser">Here's the trigger</a>
  <div class="collapse" id="collapser">
    <div class="list-group-item">Here's the collapsing content</div>
  </div>
  <span class="list-group-item list-group-item-action">Here's another item</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>