2013-03-16 359 views
0

我是一個完整的新手到網站的發展,所以我下面的其他開發人員給出的圖案。我下面就如何在下拉菜單中添加此site教程。下拉菜單?

我發現下面這個教程另一個人的堆棧溢出一個問題。我已經失去了聯繫,儘管查看了我的歷史,但我一直無法找到它。有人建議,指南是建立使用引導程序的版本1,並重提引導網站了解更多信息。我做了(我的當前版本反映了使用引導指南),但我不能夠收集到任何瞭解爲什麼我的代碼將無法正常工作。

通過引導資源和類似的堆棧溢出問題過篩像

Dropdown menu with Twitter Bootstrap

Twitter Bootstrap dropdown menu

Twitter Bootstrap 2 drop down menu is not work

畢竟似乎強調引導之前導入的jQuery的重要性,所以我已經做到了這一點,但似乎並沒有解決我的問題。以下是表明:http://imgur.com/UtYlUXG

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>KTown Car Share</title> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 
    <script src="http://flip.hr/css/bootstrap.min.css"> </script> 

    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
    </script> 

    <link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css"> 
    <style type="text/css"> 
    body{ 
     padding-top: 60px; 
     padding-bottom: 40px; 
    } 
    </style> 
    <link rel="stylesheet" href="css/bootstrap-responsive.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 


<body> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
      <a class="brand" href="#">Title</a> 
      <ul class="nav"> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        Item1 
        </ul> 
       </li> 
      </ul> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html> 

任何幫助將非常感激!我想出了什麼嘗試的想法。

回答

3

我複製粘貼你的HTML和JavaScript成的jsfiddle及其工作 http://jsfiddle.net/daJT7/3/

部分我複製:

$(document).ready(function() { 
     $('.dropdown-toggle').dropdown(); 
    }); 


<div class="navbar"> 
    <div class="navbar-inner"> 
     <a class="brand" href="#">Title</a> 
     <ul class="nav"> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       Item1 
       </ul> 
      </li> 
     </ul> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
</div> 

所以,我認爲,必須有一些與你的引用。有一兩件事我注意到的是,

<script src="http://flip.hr/css/bootstrap.min.css"> </script> 

是無效的(腳本是腳本,並且您已經導入另一條線路引導CSS)。刪除這個。這可能會或可能不會導致問題。

作爲一個側面說明。我不會直接鏈接到twitter bootstrap github或其他人的網站(除非flip.hr是你的網站:))。
嘗試使用CDN(例如http://www.bootstrapcdn.com/

+0

您是對的。我用我的參考文獻進行了一些調整,其中一個就是問題所在。非常感謝關於其他地方的聯繫 - 正式注意並予以糾正。再次感謝! – Anne 2013-03-17 00:25:52