我正在与一些基本的斗争。我链接引导和jQuery cdn到我的项目，我试图创建一个折叠按钮，这对我不起作用。
基本html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</body>
</html>这里会出什么问题呢？
1条答案
按热度按时间6yt4nkrj1#
无论何时，当你迁移到一个新版本的框架，比如Bootstrap，查看他们的迁移文档总是很重要的。在你的例子中，问题是你使用了
data-*。在Bootstrap 5.x中，他们更新了所有的数据属性到data-bs-*以避免冲突。如果我们修改您的代码以采用更新的数据属性声明，您的函数将按预期折叠。
另外，请注意，您实际上并不 * 需要 * 在Bootstrap 5.x中包含jQuery，因为他们已经从使用jQuery框架作为插件转移到使用原生JavaScript。