Bootstrap Dropdown在本地不起作用，但在Fiddle上起作用 [英] Bootstrap Dropdown not working Locally but works on Fiddle

问题描述

我正在构建一个MVC 5 Webapp，并尝试创建一个拆分下拉按钮.我的代码在Fiddle上正常工作:

I'm building an MVC 5 webapp and trying to create a split drop down button. My code works on Fiddle just fine:

<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网站复制了该示例，并将其放入我的代码中也无济于事.该按钮正确显示，但是单击后下拉列表不会扩展.

I even copied the example from the Boostrap site and dropped it into my code to no avail. The button appears correctly but the drop down does not expand when it is clicked.

这是我的脚本和样式导入，与它们在呈现的html头中显示的完全一样.正如Andrei所建议的那样，我想知道我是否会丢失某些东西或以错误的顺序导入某些东西:

Here are my script and style imports exactly as they appear in the rendered html head. As suggested by Andrei, I was wondering if I might be missing something or importing something in the wrong order:

<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>

推荐答案

导致此问题的非常常见的错误之一是两次加载jquery文件. 我建议您使用浏览器菜单中的查看页面源和 inspect 转到源代码并搜索jquery，并确保在输出html中找不到两次jquery

One of very common mistakes causing this issue is loading jquery file twice. I suggest you using View page Source and inspect in the browser menu go to source code and search for jquery and make sure you cannot find jquery twice in the output html

这篇关于Bootstrap Dropdown在本地不起作用，但在Fiddle上起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！