Bootstrap Accordion/Collapse Uncaught TypeError：非法调用答案

【问题标题】：Bootstrap Accordion/Collapse Uncaught TypeError: Illegal invocationBootstrap Accordion/Collapse Uncaught TypeError：非法调用
【发布时间】：2021-11-05 04:10:01
【问题描述】：

我正在使用 Bootstrap 5 手风琴/折叠功能，我的代码似乎符合 BS5 文档，但几个月前在 StackOverflow 上遇到了类似的问题：

Bootstrap Accordion Throws TypeError: Illegal invocation

这是浏览器错误信息：

Uncaught TypeError: Illegal invocation
at Object.find (selector-engine.js:18)
at X._getParent (collapse.js:301)
at new X (collapse.js:93)
at Function.collapseInterface (collapse.js:347)
at collapse.js:397
at Array.forEach (<anonymous>)
at HTMLButtonElement.<anonymous> (collapse.js:382)
at HTMLDocument.s (event-handler.js:119)

这里的演示： https://codepen.io/highercoding/pen/BadYQrL?editors=1010

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

罪魁祸首是#collapse-manufacturers 上的data-bs-parent。应该是手风琴组件#product-filter-accordion的id。

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  </head>
  <body>
      
    <div class="accordion accordion-flush" id="product-filter-accordion">
      <div id="product-filter-sidebar-manufacturers" class="product-filter-sidebar widget-area accordion-item" role="complementary">
        <h3 id="heading-manufacturers" class="accordion-header">
          <button data-bs-toggle="collapse" data-bs-target="#collapse-manufacturers" aria-controls="collapse-manufacturers" aria-expanded="false" class="accordion-button collapsed" type="button">Click here on the accordion header </button>
        </h3>
        <div id="collapse-manufacturers" aria-labelledby="heading-manufacturers" data-bs-parent="#product-filter-accordion" class="accordion-collapse collapse">
          <div class="accordion-body">You no more have to click twice to see the accordion body content :)</div>
        </div>
      </div>
    </div>
      
  </body>
</html>

【讨论】：

感谢 Nathan，其中一位需要新鲜的眼睛！