Bootstrap Accordion/Collapse 未捕获的 TypeError：非法调用
2021-11-04
1944
我正在使用 Bootstrap 5 折叠功能，我的代码似乎符合 BS5 文档，但几个月前在 StackOverflow 上出现了一个与此类似的问题：
Bootstrap Accordion Throws TypeError：非法调用
这是浏览器错误消息：
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
1个回答
罪魁祸首是
#collapse-manufacturers
上的
data-bs-parent
。它应该是折叠面板组件
#product-filter-accordion
的
id
。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
2021-11-04