Javascript 我无法让折叠函数在引导上工作

我曾尝试用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>

---

OP正在使用版本5的引导

我添加了官方的css和js链接。 引导程序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">

过滤器

您的HTML看起来很好。正如其他人所说，这里不需要jQuery。我知道你在使用Alpha-CDN，我建议你使用beta版，因为它更稳定。您只需更改JS以使用此选项即可：

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

（引导程序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>

#单选按钮组
你的选择是什么？
味精1
味精2
是

这是味精1
否

这是味精2

---

jsiddle:

BS5.0.0-alpha3是字母；-）不要在生产中使用它。Bootstrap5现在已经在实际版本中，与jQuery库兼容，但不再需要。您可以通过编辑HTML从div class属性中删除“show”类（该属性还包括类“accordion collapse”）来使所有accordion项最初折叠（请参阅）。然而，似乎没有办法使用JavaScript显示或折叠手风琴项目，可能是因为这需要承诺或“等待”（引导动画异步显示/折叠）。非常感谢！这解决了所有的问题非常感谢你，它现在起作用了。我使用的是Alpha链接，没有意识到beta版已经发布