javascript - Bootstrap 折叠按钮在单击时不显示内容

标签 javascript jquery html css twitter-bootstrap

我制作了一个 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/

相关文章:

javascript - Highcharts w/React - 在 JSX 中找不到渲染 div

javascript - 他们怎么能在这里调用 def.then 呢?

javascript - 当数组有两个值时如何处理

jquery - Kendo mvc刷新tabstrip中的选项卡之一

JQuery 数据选择器未使用 .data 更新

javascript - 在 node.js 中加载和执行外部 js 文件并访问局部变量?

javascript - 在浏览器中提交表单和在javascript中多线程

javascript - 滚动加载更多 SQL 限制

javascript - 使用单一模型编辑多个变量

javascript - 仅在视频播放时进行视频控制 (html5)