如何在没有ID的情况下初始化和操作Bootstrap Collapse？

Question

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

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

我相信问题是

collapse('toggle')

。我应该怎么办？我没有使用 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 中，您需要使用构造函数创建一个折叠实例。例如：

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

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

c.addEventListener('click', function() {
  myCollapse.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>