css Bootstrap Collapse需要什么？

fslejnso 于 12个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(116)

这本来是工作的，直到我删除了一些JS文件和未使用的CSS。现在，我不能再让 accordion 按钮展开。我相信我的实现不需要JS。然而，据我所知，我重新实现了所有JS，当它工作的时候。
我相信我的问题是我错过了CSS中必要的数据切换。然而，原始CSS文件没有任何与按钮或 accordion 类相关的折叠切换。只有.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; } }

型

css

来源：https://stackoverflow.com/questions/74324143/whats-required-for-bootstrap-collapse

2条答案

按热度按时间

s2j5cfk01#

既然你已经用bootstrap-4标记了它，我就假设你用的是Bootstrap 4。
如果是这样的话，您需要使用jQuery沿着Bootstrap JS捆绑包来使用collapse：

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

字符串
下面是一个快速的示例，演示了如何将collapse与这两个选项一起使用。
然而，如果你使用的是Bootstrap 5，jQuery就不是一个依赖项了，只要包含JS包就可以了。

Bootstrap 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>

型

赞(0）回复(0）举报 12个月前

qojgxg4l2#

accordion在内部使用collapse来使其可折叠。collapse组件需要js bootstrap bundle。
确保在元素中导入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 bundle的更多信息，请阅读官方文档。

赞(0）回复(0）举报 12个月前

我来回答

css Bootstrap Collapse需要什么？

2条答案

Bootstrap 4

Bootstrap 5（无jQuery）

相关问题

热门标签

最新问答