如何在不使用ID的情况下初始化并操作Bootstrap 5 Collapse？

问题背景 #

需要不依赖ID实现Bootstrap Collapse功能，参考旧方案在Bootstrap 5中报错：Uncaught TypeError: c.nextElementSibling.collapse is not a function，且未使用jQuery。

原代码如下：

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

原JS

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

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

错误原因 #

Bootstrap 5彻底移除了jQuery依赖，不再像旧版本那样给DOM元素直接挂载collapse()这类方法，必须通过官方提供的Collapse类实例来调用切换方法。

解决方案 #

提供两种可行方案，按需选择：

方案1：手动初始化Collapse实例并调用方法

通过Bootstrap的Collapse构造函数初始化目标折叠元素，然后调用实例的toggle()方法：

// 获取触发按钮和目标折叠元素
const trigger = document.querySelector('.c');
const targetCollapse = trigger.nextElementSibling;

// 初始化Collapse实例，设置toggle:false避免初始化时自动切换
const collapseInstance = new bootstrap.Collapse(targetCollapse, {
  toggle: false
});

// 绑定点击事件切换状态
trigger.addEventListener('click', () => {
  collapseInstance.toggle();
});

方案2：利用CSS选择器简化实现（推荐）

Bootstrap 5的data-bs-target属性支持CSS选择器，直接使用相邻兄弟选择器关联目标元素，无需自定义JS：
修改HTML中的触发按钮，添加data-bs-target="+ .collapse"：

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

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

+ .collapse表示选择当前元素的下一个同级.collapse元素，完美匹配你的DOM结构，Bootstrap会自动完成关联和状态切换，无需额外JS代码。

内容的提问来源于stack exchange，提问作者aboutjquery