数据切换不适用于以下最新的引导链接答案

【问题标题】：data-toggle not working with following latest bootstrap links数据切换不适用于以下最新的引导链接
【发布时间】：2022-01-13 09:20:45
【问题描述】：

我试图使用数据切换，但下面给出的代码不起作用。请帮我摆脱它。我使用了最新的引导 cdn 链接。代码如下。

    <html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Click</button>
<div id="demo" class="collapse">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</div>
</div>
</div>
</body>
</html>

【问题讨论】：

标签： html twitter-bootstrap toggle

【解决方案1】：

在 bootstrap.min.js 之前需要 jquery

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Demo

【讨论】：

【解决方案2】：

如果其他人在 2022 年遇到此问题，并且您的 CDN/文件位于正确位置 - 试试这个：

//---On the button

//Replace
data-toggle="collapse" data-target=".navbar-collapse"

//With
data-bs-toggle="collapse" data-bs-target=".navbar-collapse"

// Current CDNs
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

有关详细信息，请参阅 Bootstrap 文档 https://getbootstrap.com/docs/5.0/components/collapse/

【讨论】：

B5 不需要 JQuery 导入。