2013-03-23 38 views
4

我想做一個下拉菜單,它似乎工作在Jsfiddle。看來javascript和css文件被正確加載: http://imgur.com/YYiJS4pTwitter Bootstrap下拉不能在任何瀏覽器工作

但它不適用於我的任何瀏覽器。我已經在Firefox 19.0.2,Google Chrome 25.0.1364.172和Internet Explorer 9.0.2中測試過它。 Javascript已啓用並正在運行。

在Bootstrap之前包含Javascript並且bootstrap-dropdown.js是我包含的唯一引導文件,我的意思是我沒有包含bootstrap.js。

我的錯誤控制檯中沒有任何東西。

在此先感謝。

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
     <meta charset="utf-8"> 
     <title>Bootstrap, from Twitter</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
     <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
     <style type="text/css"> 
      body { 
       padding-top: 60px; 
       padding-bottom: 40px; 
       } 
       .sidebar-nav { 
       padding: 9px 0; 
       } 
     </style> 
     <link href="./css/bootstrap-responsive.min.css" rel="stylesheet"> 
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
     <!--[if lt IE 9]> 
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <!-- Fav and touch icons --> 
     <link rel="shortcut icon" href="../assets/ico/favicon.ico"> 
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> 
    </head> 

    <body> 
     <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <ul class="nav"> 
        <a class="brand" href="#">w3resource</a> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
        <li class="dropdown" id="accountmenu"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">PHP</a></li> 
          <li><a href="#">MySQL</a></li> 
          <li class="divider"></li> 
          <li><a href="#">JavaScript</a></li> 
          <li><a href="#">HTML5</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
     </div> 
     <div class="container-fluid"> 
      <div class="row-fluid"> 
       <div class="span3"> 
        <div class="well sidebar-nav"> 
         <ul class="nav nav-list"> 
          <li class="nav-header">Componentes</li> 
          <li> 
           <a href="#">Link</a> 
          </li> 
          <li> 
           <a href="#">Link</a> 
          </li> 
         </ul> 
        </div> 
        <!--/.well --> 
       </div> 
       <!--/span--> 
       <div class="span9"> 
        <div class="row-fluid"> 
         <div class="span4"> 
          <h2>Canvas</h2> 
          <canvas id="myCanvas">Tu explorador no soporta canvas.</canvas> 
          <script> 

          var c=document.getElementById("myCanvas"); 
          var ctx=c.getContext("2d"); 
          ctx.fillStyle="#AA0000"; 
          ctx.fillRect(0,0,150,75); 

          </script> 

         </div> 
         <!--/span--> 
        <!--/row--> 
       </div> 
       <!--/span--> 
      </div> 
      <!--/row--> 
     </div> 
     <!--/.fluid-container--> 

    <!-- Placed at the end of the document so the pages load faster --> 
      <hr> 
      <footer> 
       <p>© Company 2013</p> 
      </footer> 
     <script src="./js/jquery-1.9.1.js"></script> 
     <script src="./js/bootstrap-dropdown.js"></script> 
    </body> 

</html> 
+0

教程部分的下拉菜單,對我來說工作正常......但我加載了另一個源的引導程序。所以我的猜測是你沒有正確加載一些文件。 – Fede 2013-03-23 21:22:11

+0

@Fede我加載了bootstrap.min.css,bootstrap-responsive.min.css,jquery-1.9.1.js和bootstrap-dropdown.js。也許我應該使用較低的jQuery版本? – Cod1ngFree 2013-03-23 21:52:46

回答

5

這就是我加載:

<script src="http://code.jquery.com/jquery.js"></script> 
<script src="bootstrap/js/bootstrap.js"></script> 

我想你的代碼,加載從網站bootrasp我已經在我的機器和jQuery的。它可以在FF,鉻和Safari瀏覽器中完美工作。我沒有一個資源管理器來測試它。

1

在加載bootstrap-dropdown.js之前,您需要加載bootstrap.min.js或bootstrap.js。 Bootstrap下拉是一個js插件,它依賴於Bootstrap框架。然後

你的頁腳部分是這樣的:

<footer> 
    <p>© Company 2013</p> 
</footer> 
<script src="./js/jquery-1.9.1.js"></script> 
<script src="./js/bootstrap.js"></script> 
<script src="./js/bootstrap-dropdown.js"></script> 

您可以自定義引導的身材,那麼你就不必再單獨引導-dropdown.js,將裝載引導。

引導自定義下載: http://twitter.github.com/bootstrap/customize.html

+0

雖然這不是解決方案,甚至我遇到的問題也不同,但是我從另外一個主意中得到了另外一個想法,所以+1隊友......我投你了......謝謝 – 2017-05-16 12:23:59

3

我有一個類似的問題,但發現我是同時裝入

bootstrap.min.js

引導。 dropdown.js

這是導致我的代碼衝突,你不需要加載兩個,因爲下拉代碼包含在bootstrap.min.js

1

「min」版本導致問題有時(我偶爾遇到.min文件的問題與ASP.NET MVC)

我有同樣的問題,嘗試與bootstrap.js,它工作正常!

在你的最後嘗試。

+0

真棒!這是真的! – 2014-05-29 07:45:09

相關問題