javascript - Bootstrap 切换按钮不起作用(尽管将 bootstrap.js 加载到源文件中,但不加载事件监听器)

标签 javascript html css twitter-bootstrap asp.net-core-mvc

我正在尝试从常规的 aspnetcore 控制台应用程序重建 aspnetcore mvc 模板。现在我在前端部分,我已经编写了 _Layout.cshtml 文件。当我运行该应用程序时,导航栏按钮(显示在较小的屏幕上)将不起作用

这是我正在谈论的导航栏按钮的功能示例

enter image description here

当我编写代码时,它不起作用。它坐在那里很漂亮,没有反应。

当我点击它时保持这样
enter image description here

现在两者的按钮标签是相同的:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

两者应显示的标签相同:

<div class="navbar-collapse collapse">

bootstrap.js 的脚本标签对于两者是相同的:

<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

当我检查工作示例中的按钮并检查 Event listeners 时,我看到一大堆事件监听器,它们都调用 bootstrap.js 文件:

enter image description here

在我自己损坏的代码中检查按钮时,我没有看到任何事件监听器:

enter image description here

这让我觉得 bootstrap.js 没有加载到我损坏的代码中,但后来我查看了源选项卡:

enter image description here

还有 bootstrap.js 在那里,清楚地加载了一切?可能是什么原因导致了这个问题?

最佳答案

Bootstrap 的某些功能依赖于 jQuery,因此必须在 bootstrap.js 文件之前加载 jQuery。如果您有多个脚本文件,最好检查依赖项并确保首先加载所有必需的文件。 (经验之谈!)

关于javascript - Bootstrap 切换按钮不起作用(尽管将 bootstrap.js 加载到源文件中,但不加载事件监听器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45466547/

相关文章:

HTML/CSS 创建带有箭头底部的 Div

javascript - 无法使用以下代码使用 javascript 创建 TreeView

jquery - HTML 中的虚拟链接以加载对话框

jquery - 你知道一些关于 'iphone css layouts' 的好网站吗,你能帮我改进我的代码吗

php - 使用表格和 while 循环在大图像下显示小图像

javascript - 如何在jquery、javascript、HTML5中将base64字符串另存为(PDF、doc、xls、png..)

javascript - 打开和关闭模态窗口不起作用

javascript - 包含对象数组的过滤对象

javascript - 如何在 Node js中使其变得简单

html - 这个 fiddle 中额外的 5px 从哪里来?