javascript - Bootstrap Dropdown 在本地不工作但在 Fiddle 上工作

Question

我正在构建一个 MVC 5 网络应用程序并尝试创建一个拆分下拉按钮。我的代码在 Fiddle 上运行得很好:

<div class="btn-group pull-right">
     <button id="ClearRules" type="button" class="btn btn-xs btn-default" title="Clear all of the rules"><span class="glyphicon glyphicon-remove"></span> Clear</button>
     <button id="AddRule" type="button" class="btn btn-xs btn-default" title="Add a new rule"><span class="glyphicon glyphicon-plus"></span> Add</button>
     <button id="AddRules" class="btn btn-xs btn-default dropdown-toggle" title="Add several rules" data-toggle="dropdown">
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a href="#">5</a></li>
         <li><a href="#">10</a></li>
         <li><a href="#">15</a></li>
         <li><a href="#">20</a></li>
     </ul>
</div>

我的 js 和 css 包包括 bootstrap:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-toggle.js",
                  "~/Scripts/respond.js",
                  "~/Scripts/bootstrap-dialog.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/bootstrap-toggle.css",
                  "~/Content/bootstrap-dialog.css"));

我什至从 Boostrap 站点复制了示例并将其放入我的代码中，但无济于事。按钮正确显示，但单击时下拉菜单不会展开。

编辑:

这是我的脚本和样式导入，与它们在呈现的 html 头部中完全一样。正如 Andrei 所建议的那样，我想知道我是否可能遗漏了某些东西或以错误的顺序导入了某些东西:

<script src="/Scripts/jquery-3.1.1.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/bootstrap-toggle.css" rel="stylesheet"/>
<link href="/Content/bootstrap-dialog.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/Tether/Tether.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-toggle.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-dialog.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>    
<script src="/Scripts/TheRandomizer.ItemListMaintenance.js"></script>

Answer 1

a) 检查控制台是否有任何错误。

b) 检查是否存在以下任何常见问题:

• 你没有加载 jquery(.min).js
• 你没有加载 bootstrap(.min).js
• 你没有在 bootstrap(.min).js 之前加载 jquery(.min).js
• 您没有在 bootstrap(.min).js 之前加载 tether(.min).js 并且您使用的是 v4。

不幸的是，如果您无法为您的错误创建一个最小的、完整的和可验证的示例(您说您做不到)，这就是我可以提供的所有帮助。祝你好运!