我制作了一个 CodePen 并尝试使用 Bootstrap 通过按钮进行折叠。我包含了 Bootstrap、JQuery 和 Popper 库。 CSS Bootstrap 正在工作,因为我的按钮正在设置样式,但是当它被点击时它不显示内容。我将包含一段代码以及指向完整 CodePen 的链接。也欢迎对该元素提出任何建议,但我真的只需要知道为什么崩溃不起作用。感谢阅读,我希望我能在大家的帮助下完成这项工作!
按钮:
<button
data-toggle="collapse"
data-target="#website-code-container"
type="button"
class="btn btn-primary"
>
Click Me to See the code used
</button>
显示内容:
<div id="website-code-container" class="collapse"> ... </div>
链接到完整的 CodePen,这可能会有更多帮助:CodePen
最佳答案
您导入的 Bootstrap CSS 和 Popper JS 库有问题。
尝试从 https://getbootstrap.com/ 中列出的 Bootstrap CDN 导入 css
在加载 bootstrap.js 之前不要忘记加载 jQuery
这里是 CSS 和 JS 的链接,以便于访问
仅 CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
JS、Popper.js 和 jQuery
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
您可以在 https://www.bootstrapcdn.com/legacy/bootstrap/ 找到这些库的早期版本
关于javascript - Bootstrap 折叠按钮在单击时不显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59756334/