在我的菜单中,下拉菜单无效。无济于事,我已经尝试了许多建议的修复程序。我已经使用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>
答案 0 :(得分:1)
好像你错过了bootstrap.js
文件,它确实包含了bootstrap.min.css
和jquery.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();
});