2017-03-04 88 views
2

我正在構建MVC 5 web應用程序,並嘗試創建拆分下拉按鈕。我的代碼工作的小提琴就好:Bootstrap下拉不工作本地,但在小提琴上工作

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

jscss捆綁包括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頭。正如安德烈的建議,我在想,如果我可能失去了一些東西,或在錯誤的順序進口的東西:對任何錯誤

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

回答

1

導致此問題的常見錯誤之一是加載jquery文件兩次。 我建議你使用查看頁面源代碼檢查在瀏覽器菜單中去的源代碼和搜索jQuery和確保你找不到的jQuery兩次在輸出HTML

+0

這是問題,我不知道知道何時或如何發生,但在我的_layout結尾有Script.Render調用。謝謝! – Lance

2

一)檢查控制檯。

二)檢查所有的這些共同的問題:

  • 你不加載jquery(.min).js
  • 你不bootstrap(.min).js
  • 你之前加載bootstrap(.min).js
  • 你不加載jquery(.min).jsbootstrap(.min).js之前沒有加載tether(.min).js,而您正在使用v4。

不幸的是,如果您無法爲您的錯誤創建一個最小的,完整的和可驗證的例子(您說你不能),那就是我可以提供的所有幫助。祝你好運!

相關問題