我的示例工作正常时,Bootstrap按钮下拉列表不起作用?

时间:2013-05-22 12:52:29

标签: ruby-on-rails-3 button twitter-bootstrap

我已经为bootstrap按钮下拉创建了一个示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Button</title>
   <link rel="stylesheet" href="stylesheets/bootstrap.css"/> 
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
  </head>
  <body>
    <div class="btn-group">
      <button class="btn btn-success">Action</button>
      <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="">HI</a></li>
        <li><a href="">BYE</a></li>
      </ul>
    </div>
  </body>
</html>

这个例子工作正常。 但是当我在我的rails 3中创建相同的应用程序下拉不起作用。这是我的代码:在Application.html.erb

<!DOCTYPE html>
<html>
    <head>
        <title>Accounting-ProfitBooks</title>
        <%= stylesheet_link_tag 'style','custom','report','jquery-ui' %>
        <%= stylesheet_link_tag 'jquery.ui.datepicker' %>
        <%= stylesheet_link_tag 'ui.dropdownchecklist' %>
        <%= stylesheet_link_tag "jquery-1.7.2-ui.css" %>
        <%= javascript_include_tag "jquery-1.4.2.min", "jquery-1.8.1.ui.min", "jsapi" %>
        <%= stylesheet_link_tag "zendesk.css" %>
        <%= javascript_include_tag "zendesk.js" %>
        <%= stylesheet_link_tag "bootstrap.css" %>
        <%= javascript_include_tag "bootstrap.js"%>
        <%= javascript_include_tag "bootstrap.min.js"%>
        <%= javascript_include_tag "bootstrap-dropdown.js"%>
        <%= javascript_include_tag :defaults %>
        <%= javascript_include_tag 'jquery-1.6.4.min.js',"jquery-1.8.ui.min.js" %>
        <%= javascript_include_tag 'jquery.ui.core.min' %>
        <%= javascript_include_tag 'ui.dropdownchecklist' %>
        <%= javascript_include_tag 'jquery.ui.widget.min' %>
        <%= javascript_include_tag 'jquery.ui.tabs.min' %>
        <%= javascript_include_tag 'jquery.tipTip.min' %>
        <%= javascript_include_tag 'jquery.ui.datepicker' %>
        <%= javascript_include_tag 'jquery.ui.autocomplete.min' %>
        <%= javascript_include_tag 'jquery.superfish.min' %>
        <%= javascript_include_tag 'jquery.supersubs.min' %>
        <%= javascript_include_tag 'jquery.validate_pack' %>
        <%= javascript_include_tag 'jquery.nyroModal.pack' %>
        <%= javascript_include_tag 'jquery.dataTables.min' %>
        <%= javascript_include_tag 'nested_form' %>
        <%= javascript_include_tag 'best_in_place' %>
        <%= javascript_include_tag 'colortip-1.0-jquery.js'%>
        <%= javascript_include_tag 'script.js'%>

            <%= csrf_meta_tag %>
</head>

这是我的HTML:

<div class="btn-group">
      <button class="btn btn-success">Action</button>
      <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="">HI</a></li>
        <li><a href="">BYE</a></li>
      </ul>
    </div>

我认为他们的jquery存在问题,但我无法追踪,任何帮助都会感激不尽。

1 个答案:

答案 0 :(得分:0)

我有一个解决这个问题的方法,实际上,我的jquery有一些问题,所以我下载最新的jquery并应用它,它适用于我。 这是我的新jquery文件文件:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

我已将两者都包含在application.htm.erb布局文件中,一切正常。