Bootstrap 下拉菜單在 Ruby on Rails 中不起作用

Question

我正在嘗試讓引導程序下拉菜單在我的 Ruby on Rails 應用程序導航欄中工作。

我包含了正確的 javascript file.s

這是代碼：

<div class="dropdown-toggle" data-toggle=>"dropdown"><%= link_to current_user.first_name, profileshow_path(current_user)%></div>
                    <ul class="dropdown-menu">
                       <li><%= link_to "Account Settings", edit_user_registration_path%></li>
                       <li><%= link_to "Your Profile", profileshow_path(current_user) %></li>
                       <li class='last'><%= link_to "Logout", destroy_user_session_path, :method => :delete %></li>
                    </ul>





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

Answer 1

我之前沒有使用過 Bootstrap，但是查看文檔中的示例，我覺得您的嵌套不正確。

請嘗試：

<div class="dropdown">
  <%= link_to(profileshow_path(current_user),
              :class => 'btn btn-default dropdown-toggle',
              :data  => { :toggle => 'dropdown' }) do %>
    <%= current_user.first_name %>
    <span class="caret"></span>
  <% end %>
  <ul class="dropdown-menu">
    <li>
      <%= link_to("Account Settings", edit_user_registration_path) %>
    </li>
    <li>
      <%= link_to("Your Profile", profileshow_path(current_user)) %>
    </li>
    <li>
      <%= link_to("Logout", destroy_user_session_path, :method => :delete) %>
    </li>
  </ul>
</div>

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

Answer 2

嘗試添加這些腳本元素。 取出：

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

並替換為：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>