Question

我正在使用rails的Bootstrap-Dropdown菜单，但目前它没有运行。当我点击下拉链接时，它会在网址上添加一个“＃”，而其他内容则不会更改。

“_ header.html.erb”

<% if signed_in? %>
        <li><%= link_to "Device", '/devices' %></li>
        <li><%= link_to "Users", users_path %></li>
        <li id="fat-menu" class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Account <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><%= link_to "Profile", current_user %></li>
            <li><%= link_to "Settings", edit_user_path(current_user) %></li>
            <li class="divider"></li>
            <li>
              <%= link_to "Sign out", signout_path, method: "delete" %>
            </li>
          </ul>
        </li>
      <% else %>
        <li><%= link_to "Sign in", signin_path %></li>
      <% end %>

的application.js

//= require bootstrap
//= require bootstrap-dropdown
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

application.html.erb

  <head>
<title><%= full_title(yield(:title)) %></title>
<%= javascript_include_tag "https://js.stripe.com/v1/" %>
<%= stylesheet_link_tag "application", media: "all",
                                       "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>

Answer 1

Bootstrap需要jQuery，所以你可能需要jQuery在加载顺序中领先于Bootstrap。您也不需要单独包含bootstrap-dropdown：

变化

//= require bootstrap
//= require bootstrap-dropdown
//= require jquery
//= require jquery_ujs

到

//= require jquery
//= require jquery_ujs
//= require bootstrap

Answer 2

解决方法是从列表中删除bootstrap，然后保留bootstrap-dropdown

//= require bootstrap-dropdown
//= require jquery
//= require jquery_ujs

立即投放

Bootstrap-Dropdown无法正常工作[RAILS]

2 个答案: