2014-09-02 260 views
0

我有以下呈現下拉(從我的Rails應用程序):bootstrap下拉不下拉?

<nav class="navbar navbar-inverse navbar-fixed-top topbar" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"> 
     <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
     </button> 
     <a href="/"></a></div> 
    <div class="collapse navbar-collapse navbar-right"> 
     <ul class="nav navbar-nav"> 
     <li><a href="https://stackoverflow.com/users/edit">Edit account</a></li> 
     <li><a data-method="delete" href="https://stackoverflow.com/users/sign_out" rel="nofollow">Sign out</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin<span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="/users">Users</a></li> 
      <li><a href="#"> Another action</a></li> 
      <li class="divider"></li> 
      <li><a href="#"> Another action2</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

它顯示是這樣的:

partial_menu

它看起來不錯,但下拉不起作用。我有一段時間的工作,但我不明白爲什麼這不起作用(下拉只是一個'#'的鏈接,即它不會下拉)。

日誌文件沒有任何內容。我不知道在哪裏尋找解決這個問題。我該如何解決?

編輯:從頭部標籤 加js這些是包括:

<head> 
    <link href="http://fonts.googleapis.com/css?family=Ruda:400,900,700" media="screen" rel="stylesheet"> 
    <meta content="width=device-width, initial-scale=1.0" name="viewport"> 
    <title>title</title> 
    <meta content="title" name="description"> 
    <link data-turbolinks-track="true" href="/assets/framework_and_overrides.css?body=1" media="all" rel="stylesheet"> 
    <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet"> 
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> 
    <style type="text/css"></style> 
    <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/bootstrap-sprockets.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/jetmenu.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/visitors.js?body=1"></script> 
    <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> 
    <meta content="authenticity_token" name="csrf-param"> 
    <meta content="***" name="csrf-token"> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" media="screen" rel="stylesheet"> 
</head> 
+0

如果您在dropdown.js或bootstrap.js之前包含了另一個JavaScript文件,那麼該文件中可能會出現一個錯誤,導致進一步的腳本無法執行?腳本之間也可能有衝突。 – 2014-09-02 20:51:44

+0

它應該包含在我的應用程序佈局中,但我會檢查。儘管我的網頁沒有使用bootstrap嗎?或者在控制檯中拋出一個錯誤? – Jeff 2014-09-02 20:55:53

+0

頁面仍然會顯示,但它不會執行Bootstrap所需的任何JavaScript。如果其他交互式元素正在工作,那麼您可能會包含腳本。 你有jQuery嗎?它是所有Bootstrap插件所必需的。 – 2014-09-02 21:00:44

回答

1

你必須通過JavaScript來調用下拉菜單:

<script> 
     $('.dropdown-toggle').dropdown(); 
    </script> 

添加該代碼在腳本

DEMO