带有Bootstrap下拉列表的Rails无法正常工作

时间:2016-09-05 10:21:04

标签: twitter-bootstrap ruby-on-rails-5

在我的菜单中,下拉菜单无效。无济于事,我已经尝试了许多建议的修复程序。我已经使用bower加载了bootstrap。

更新:这是带有下拉列表的整个导航栏:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand"><%= Rails.application.class.parent_name %></a>
    </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><%= link_to 'Dashboard', root_path %></li>
      <li><%= link_to 'Users', users_path %></li>
      <li><%= link_to 'Annotations', annotations_path %></li>
      <li><%= link_to 'Document types', documenttypes_path %></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><p>Basic settings</p></li>
        <li><%= link_to 'Document types', documenttypes_path %></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">Access Management</li>
        <li><%= link_to 'Users', users_path %></li>
      </ul>
      </li>
      </ul>
      <% if user_signed_in? %>
        <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Sign out", destroy_user_session_path, method: :delete %></li>
        <li><%= link_to edit_user_registration_path do %>
          <% if current_user.username.empty? %>
            <strong><%= current_user.email %></strong>
          <% else %>
            <strong><%= current_user.username %></strong>
          <% end %>
          <% end -%>
        </li>
        </ul>
      <% else %>
        <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Sign up", new_user_registration_path %></li>
        </ul>
      <% end %>
  </div><!--/.nav-collapse -->
  </div>
</nav>

这是application.html.erb:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Shine</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="ideas at work">

  <%= favicon_link_tag 'iawfavicon.ico' %>

  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>

</head>

这是客户端输出:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Shine</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="ideas at work">

  <link rel="shortcut icon" type="image/x-icon" href="/assets/iawfavicon-c1333c6e589de80592f43474f4394544f63ac4b8c8fe34892e07c3537188285f.ico" />

  <link rel="stylesheet" media="all" href="/assets/annotations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/comments.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/documenttypes.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/application.self-56daaaf14b543461ebacd513032f4d2032d632debe144e8797fee1f5332d6cbc.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/bootstrap-sass-official/assets/stylesheets/_bootstrap.self-a0231ca7af81b4da1fab75a6d8ba66f6295006a067bd0f206cd333698f2e752d.css?body=1" />
  <script src="/assets/jquery/dist/jquery.self-129d502feca6efc755ec29c19a27cd220b0a9cecbbf9dea951e47b24b0b1aec7.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/angular/angular.self-09d22056f1fb887d7012ce3c2f5b58bf03df2dd7b91b6c2510a961ffccb25380.js?body=1"></script>
<script src="/assets/angular_test_app.self-589fc9d4232734420eb9d48457082936ade14ecfa75b8fcb837f8eec839225c9.js?body=1"></script>
<script src="/assets/annotations.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/comments.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/documenttypes.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/users_app.self-aa5a0d162e5e2b48f2c7b49bf9de23956a8367276459a59f726dc974f3a5511a.js?body=1"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="VysFjpn1V//BXLI1RpVkr36iZMdP1xChZ1BkaBWQvzMagsKiHMWAkG2mfECKDocCncvjzzejXlUdYZHuoS6Hrw==" />

</head>

<body class="container-fluid">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand">Shine</a>
    </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="/">Dashboard</a></li>
      <li><a href="/users">Users</a></li>
      <li><a href="/annotations">Annotations</a></li>
      <li><a href="/documenttypes">Document types</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><p>Basic settings</p></li>
        <li><a href="/documenttypes">Document types</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">Access Management</li>
        <li><a href="/users">Users</a></li>
      </ul>
      </li>
      </ul>
        <ul class="nav navbar-nav navbar-right">
        <li><a rel="nofollow" data-method="delete" href="/users/sign_out">Sign out</a></li>
        <li><a href="/users/edit">
            <strong>smee</strong>
</a>        </li>
        </ul>
  </div><!--/.nav-collapse -->
  </div>
</nav> <!-- top menu for all pages -->



  <section class="search-results">
    <header><h3>Document Types</h3></header>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th style="text-align:center">Active</th>
                <th>Created</th>
                <th>Last update</th>
                <th style="text-align:center" colspan="2"><a class="btn btn-success btn-xs" href="/documenttypes/new">Add</a></th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>Invoice</td>
                    <td></td>
                    <td style="text-align:center"><input type="checkbox" name="" id="" value="" disabled="disabled" checked="checked" /></td>
                    <td>2016-09-05</td>
                    <td>2016-09-05</td>
                    <td><a class="btn btn-default btn-xs" href="/documenttypes/1">Open</a></td>
                </tr>
                <tr>
                    <td>Credit Note</td>
                    <td></td>
                    <td style="text-align:center"><input type="checkbox" name="" id="" value="" disabled="disabled" /></td>
                    <td>2016-09-05</td>
                    <td>2016-09-05</td>
                    <td><a class="btn btn-default btn-xs" href="/documenttypes/2">Open</a></td>
                    <td><a data-confirm="Please confirm!" class="btn btn-danger btn-xs" rel="nofollow" data-method="delete" href="/documenttypes/2">Delete</a></td>
                </tr>
        </tbody>
    </table>
</section>

</body>

</html>

2 个答案:

答案 0 :(得分:1)

好像你错过了bootstrap.js文件,它确实包含了bootstrap.min.cssjquery.js,但它缺少了Bootstrap的javascript。为了对此进行管理,请在头部区域中自定义或修复您的凉亭设置(bower.json):

  "dependencies": {
    "bootstrap-sass": "3.3.6"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        ...
      ]
    }

确保包含正确的javascript,在我的情况下,我需要的所有javascript元素都通过覆盖bootstrap包含在bower中。但是你。也可以只包含./assets/javascripts/bootstrap.min.js

答案 1 :(得分:0)

试试这个:

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