Bootstrap 5使用js切换折叠不起作用

Question

出于某种原因，我想在没有 ID 的情况下使用折叠。我在 stackoverflow 上找到了一个旧答案，它似乎在 Bootstrap 5 中不起作用。

错误：未捕获类型错误：c.nextElementSibling.collapse 不是 功能

相信问题是崩溃（‘切换’），bootstrap 5我该怎么办？我没有使用 jQuery。

let c = document.querySelector('.c');

c.addEventListener('click', () => {
  collapser.nextElementSibling.collapse('toggle');
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<a class="nav-link c" href="#" data-bs-toggle="collapse">Has Sub</a>

<div class="collapse" aria-expanded="false">
  content...
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Answer 1

BootStrap 5 中通过 Javascript 折叠的工作方式与以前的版本略有不同。在bootstrap 5中你需要用构造函数创建一个折叠实例，例如：

let c = document.querySelector('.c');
let collapse = c.nextElementSibling;

var myCollapse = new bootstrap.Collapse(collapse, {
  toggle: false 
});

c.addEventListener('click', function () {
  myCollapse.toggle();
});