Foundation 5顶栏下拉菜单随机不起作用,但在刷新页面后仍然有效

时间:2013-12-19 20:23:52

标签: jquery css ruby-on-rails ruby zurb-foundation

我的rails应用程序(rails 4,ruby 2)中有一个使用Foundation 5的下拉菜单。大多数情况下,下拉菜单工作正常,但有时它(看似随机)不会下拉。我已经尝试使用“悬停”和“可点击”并获得相同的随机故障。只要它没有工作,只需刷新页面就可以解决问题,但对于我想避免的用户来说,这仍然是一个问题。有什么建议吗?

此代码位于views/layouts/_header.html.erb中,并在application.html.erb中呈现:

<nav class="top-bar" data-topbar data-options="is_hover: false">
  <ul class="title-area">
    <li class="name">
      <h1><%= link_to 'What Key Am I In?', root_path %></h1>
    </li>
    <li class="toggle-topbar">Menu</li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">All Keys</a></li>
      <li><%= link_to 'All Chords', chords_path %></li>
      <li><%= link_to 'All Notes', notes_path %></li>
      <li class="divider"></li>
      <li class="has-dropdown">
        <% if current_user.nil? %>
          <li><%= link_to 'Sign up!', new_user_registration_path %></li>
          <li><%= link_to 'Log in', new_user_session_path %></li>
        <% else %>
          <a href="#"><%= current_user.username %></a>
          <ul class="dropdown">
            <li><%= link_to 'View profile', current_user %></li>
            <li><%= link_to 'Edit profile', edit_user_registration_path(current_user) %></li>
            <li class="divider"></li>
            <li><%= link_to 'Chords Pending Approval', chords_pending_approval_path %>
            <li class="divider"></li>
            <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
          </ul>
        <% end %>
      </li>
    </ul>
  </section>
</nav>

2 个答案:

答案 0 :(得分:2)

我关闭了Turbolinks,它似乎到目前为止工作。看起来这可能是造成这个问题的原因,这并不令人惊讶,因为我遇到了因Turbolinks而无法正常工作的问题。

答案 1 :(得分:1)

您是否在奠定了foundation.js之后添加了以下代码,并且您是否有其他正在使用的javascript插件?我之前遇到过这个问题的JQuery图像滑块,并通过添加并将我的代码放在大括号之间来修复它。希望这是有用的,如果不是,我会对此进行更多的研究,并希望有所帮助!

     $(window).load(function() {}

你也应该在你文件的底部有这个。

 <script src="js/foundation/foundation.js"></script>
 <script src="js/foundation/foundation.topbar.js"></script>