我无法让折叠功能在 Bootstrap 上工作答案

【问题标题】：I cannot get the collapse function to work on Bootstrap我无法让折叠功能在 Bootstrap 上工作
【发布时间】：2021-03-22 05:18:56
【问题描述】：

我曾尝试使用 bootstrap 制作手风琴，但由于某种原因，当我尝试使用它时，手风琴不会展开以显示内容。有人可以解释我做错了什么吗？

<div class="accordion accordion-flush" id="accordionFlushExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                    Filters
                    </button>
                    </h2>
                    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            <ul>
                                <li><a href="/recipes">All Recipes</a></li>
                                <li><a href="/recipes?mealtype=your">My Recipes</a></li>
                                <li><a href="/recipes?mealtype=breakfast">Breakfast Recipes</a></li>
                                <li><a href="/recipes?mealtype=lunch">Lunch Recipes</a></li>
                                <li><a href="/recipes?mealtype=dinner">Dinner Recipes</a></li>
                                <li><a href="#">Vegeterian Recipes</a></li>
                                <li><a href="#">Vegan Recipes</a></li>
                                <li><a href="#">Low Calorie Recipes</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

我在网上看到的类似问题的常见解决方案指向 jquery 脚本未运行，但我有以下脚本按以下顺序：

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy" crossorigin="anonymous"></script>

【问题讨论】：

BS 5.0.0-alpha3 是 alpha ;-) 不要在生产中使用它。
Bootstrap 5 现已正式发布，兼容但不再需要 jQuery 库。并且您可以通过编辑 HTML 以从 div 类属性中删除“show”类来使所有手风琴项最初折叠，该属性还包括类“accordion-collapse”（请参阅stackoverflow.com/questions/27988776/…）。然而，似乎没有办法使用 JavaScript 来显示或折叠手风琴项目，可能是因为这需要 Promises 或“等待”（Bootstrap 动画显示/折叠异步）。

标签： javascript html jquery css

【解决方案1】：

（引导程序 5）

我只是用div + id 包裹了可折叠部分，然后给每个我有一个collapse 类的div 一个data-bs-parent。

# radio button group
<div class="row">
    <label class="col-12 col-md-8 col-form-label">
        What is your choice ?
    </label>
    <div class="col-12 col-md-4">
        <div class="btn-group btn-group-sm" role="group">
            <input type="radio" class="btn-check" name="myRadio" value="yes" id="msg1"
                   aria-expanded="false"
                   aria-controls="msg1"
                   data-bs-toggle="collapse"
                   data-bs-target="#msg1">

            <label class="btn btn-outline-primary" for="msg1">Msg 1</label>

            <input type="radio" class="btn-check" name="myRadio" value="no" id="msg2"
                   aria-expanded="false"
                   aria-controls="msg2"
                   data-bs-toggle="collapse"
                   data-bs-target="#msg2">

            <label class="btn btn-outline-primary" for="msg2">Msg 2</label>
        
        </div>
    </div>
</div>

<div class="row">
  <div class="col" id="display_data">        <!-- id wrapping all collapsed divs -->
      <div class="alert alert-warning collapse" id="msg1" data-bs-parent="#display_data">
          <strong>Yes</strong><br>
          this is msg 1
      </div>
      <div class="alert alert-warning collapse" id="msg2" data-bs-parent="#display_data">
          <strong>No</strong><br>
          this is msg 2
      </div>
  </div>
</div>

jsFiddle：https://jsfiddle.net/2ud7zcth/1/

【讨论】：

【解决方案2】：

OP 使用的是 Bootstrap 版本 5

我添加了官方的 css & js 链接。 Bootstrap 5 移除了 jQuery 依赖

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="accordion accordion" id="accordionFlushExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                    Filters
                    </button>
                    </h2>
                    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            <ul>
                                <li><a href="/recipes">All Recipes</a></li>
                                <li><a href="/recipes?mealtype=your">My Recipes</a></li>
                                <li><a href="/recipes?mealtype=breakfast">Breakfast Recipes</a></li>
                                <li><a href="/recipes?mealtype=lunch">Lunch Recipes</a></li>
                                <li><a href="/recipes?mealtype=dinner">Dinner Recipes</a></li>
                                <li><a href="#">Vegeterian Recipes</a></li>
                                <li><a href="#">Vegan Recipes</a></li>
                                <li><a href="#">Low Calorie Recipes</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </div>
  </body>

  <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"
  ></script>
</html>

【讨论】：

非常感谢，现在可以使用了。我正在使用 Alpha 链接，但没有意识到测试版已经发布

【解决方案3】：

您的 HTML 似乎没问题。正如其他人所说，这里不需要 jQuery。我看到您使用的是 Alpha CDN，我建议您使用 beta 版本，因为它更稳定。更改 JS 以使用它应该是您需要做的所有事情：

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js

【讨论】：

非常感谢！这解决了一切