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

问题描述 投票:0回答:1

出于某种原因,我想在没有 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>

twitter-bootstrap
1个回答
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>

© www.soinside.com 2019 - 2024. All rights reserved.