Bootstrap Collapse 需要什么？

Question

这原本是有效的，直到我删除了一些 JS 文件和未使用的 CSS。现在，我无法再展开手风琴按钮。我相信我的实现不需要 JS。然而，据我所知，我重新实现了它工作时存在的所有 JS。

我相信我的问题是我缺少 CSS 中必要的数据切换。但是，原始 CSS 文件没有任何与按钮或手风琴类相关的折叠切换。只有

.nav

。

HTML：

<div class="card">
  <div class="card-header py-4" id="heading-1-1" data-toggle="collapse" role="button" data-target="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
    <h6 class="mb-0"><i data-feather="file" class="mr-3"></i>Title</h6>
  </div>
  <div id="collapse-1-1" class="collapse" aria-labelledby="heading-1-1" data-parent="#accordion-1">
    <div class="card-body">
      <p>Text</p>
    </div>
  </div>
</div>

CSS：

.collapse:not(.show) {
  display: none; }

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease; }
  @media (prefers-reduced-motion: reduce) {
    .collapsing {
      transition: none; } }

Answer 1

看到您已用

bootstrap-4

标记了此内容，我将假设您正在使用 Bootstrap 4。

如果是这样，您需要将 jQuery 与 Bootstrap JS 捆绑包一起使用才能使用折叠：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

下面是一个快速示例，演示了折叠与两者的用法。

但是，如果您使用的是 Bootstrap 5，则 jQuery 不是依赖项。只需包含 JS 包即可。

引导程序4

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Title
  </button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    <p>Text</p>
  </div>
</div>

Bootstrap 5（无 jQuery）

来自 https://getbootstrap.com/docs/5.0/components/collapse/

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Answer 2

手风琴内部使用collapse来使其可折叠。 折叠组件需要 js bootstrap 包。

一定要在element中导入js包。

与 CDN :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

请注意，某些组件需要 popper JS。 Popper Js 必须在 Js Bootstrap 包之前导入。

要获取有关哪些组件需要 Js Bootstrap 捆绑包的更多信息，请阅读官方文档。