数据切换不适用于以下最新的 bootstrap 链接

Question

我试图使用数据切换，但下面给出的代码不起作用。请帮我摆脱它。我使用了最新的 bootstrap 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>

Answer 1

在 bootstrap.min.js

之前您需要 jquery

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

Demo

Answer 2

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

//---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/

数据切换不适用于以下最新的 bootstrap 链接

data-toggle not working with following latest bootstrap links

html

toggle

twitter-bootstrap