Twitter Bootstrap菜單取決於腳本順序的不同行爲

我試圖使用twitter引導帶與asp.net webforms來創建響應菜單的。Twitter Bootstrap菜單取決於腳本順序的不同行爲

<link href="includes/bootstrap.css" rel="stylesheet" type="text/css" /> 
    <link href="includes/bootstrap-responsive.min.css" rel="Stylesheet" type="text/css" /> 
    <link href="includes/sitestyles.css" rel="Stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"/> 


    <script type="text/javascript"> 

      $(function() { 
       //to fix collapse mode width issue 
       $(".nav li,.nav li a,.nav li ul").removeAttr('style'); 

       //for dropdown menu 
       $(".dropdown-menu").parent().removeClass().addClass('dropdown'); 
       $(".dropdown>a").removeClass().addClass('dropdown-toggle').append('<b class="caret"></b>').attr('data-toggle', 'dropdown'); 

       //remove default click redirect effect   
       $('.dropdown-toggle').attr('onclick', '').off('click'); 

      }); 
    </script> 
    <script src="includes/bootstrap.min.js" type="text/javascript"></script>

我遇到了一個問題：如果我包括bootstrap.min.js我在線的jQuery後菜單將削減drowdown項目和jQuery的似乎沒有任何效果 enter image description here

，但如果我包括bootstrap.min.js在我的內聯jQuery之前。切換菜單按鈕不會顯示任何菜單項目。以下是我對頁面菜單部分的完整代碼。

<div class="navbar"> 
     <div class="navbar-inner"> 
      <div class="container"> 
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
     <!-- Everything you want hidden at 940px or less, place within here --> 
      <div class="nav-collapse collapse"> 
       <asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false" 
        IncludeStyleBlock="false" Orientation="Horizontal" 
        CssClass="navbar navbar-fixed-top" 
        StaticMenuStyle-CssClass="nav" 
        StaticSelectedStyle-CssClass="active" 
        DynamicMenuStyle-CssClass="dropdown-menu"> 
        <Items> 
         <asp:MenuItem Text="Home" ToolTip="Home"></asp:MenuItem> 
         <asp:MenuItem Text="Music" ToolTip="Music"> 
          <asp:MenuItem Text="Classical" ToolTip="Classical" /> 
          <asp:MenuItem Text="Rock" ToolTip="Rock" /> 
          <asp:MenuItem Text="Jazz" ToolTip="Jazz" /> 
         </asp:MenuItem> 
         <asp:MenuItem Text="Movies" ToolTip="Movies"> 
          <asp:MenuItem Text="Action" ToolTip="Action" /> 
          <asp:MenuItem Text="Drama" ToolTip="Drama" /> 
          <asp:MenuItem Text="Musical" ToolTip="Musical" /> 
         </asp:MenuItem> 
        </Items> 
       </asp:Menu> 
      </div> 

      </div> 
      </div> 
     </div>

我試圖重現示例Responsive ASP.NET Menu Control With Twitter Bootstrap中的內容。

有人可以告訴我，我應該包括我的腳本，以及爲什麼這兩種方式似乎都不起作用？我傾向於內聯jQuery的最後是正確的順序，但不知道爲什麼切換菜單按鈕不起作用。

編輯

我注意到，如果我在文件執行我的javascript則包括bootstrap.min.js文件通過我的文件Java腳本工作的事情再次緊隨其後。

來源

2013-08-28 Kevin Kunderman

從您之前發佈的問題中，我使用您的代碼創建了自己的測試，它對我的第一次嘗試正確工作。你有沒有檢查你的自定義CSS是不是搞亂了它？嘗試刪除您的自定義CSS文件。 – Schmalzy

@Schmalzy刪除我的自定義CSS並沒有改變任何東西。雖然我注意到，如果我執行我的JavaScript文件，然後包括bootstrap.min.js文件，然後再次通過我的文件Java腳本的東西工作 –

它看起來像你的問題是你的jQuery <script>標記。你不能<script />你有自己關閉腳本代碼，以開放和關閉標籤<script></script>

這可以解釋爲什麼下面的腳本不能正常工作，爲什麼當你添加的自定義腳本兩次它沒有正常工作。

來源

2013-08-28 17:41:52 Schmalzy

這就是它是什麼。將關閉腳本標記添加到jquery包含中，並且它可以工作。男人我像白癡一樣墜落感謝您的幫助 –

Twitter Bootstrap菜單取決於腳本順序的不同行爲

回答

相關問題