基础5顶部栏下拉菜单随机不工作，然后工作后刷新页面

I have a dropdown menu in my rails app (rails 4, ruby 2) that uses Foundation 5. Most of the time the dropdown menu works fine, but sometimes it (seemingly randomly) doesn't drop-down. I have tried it using both "hover" and "clickable" and got the same random breakdowns. Any time it hasn't worked, simply refreshing the page has solved the problem, but this is still a problem for users that I would like to avoid. Any suggestions?

我在rails应用程序(rails 4, ruby 2)中有一个下拉菜单，使用的是Foundation 5。大多数时候下拉菜单可以正常工作，但有时它(看起来是随机的)不会下拉。我用了“悬停”和“可点击”两种方法，得到了相同的随机分解。任何时候它没有工作，只是刷新页面已经解决了问题，但这仍然是一个用户的问题，我希望避免。有什么建议吗?

This code is in views/layouts/_header.html.erb and is rendered in application.html.erb:

这个代码在view /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 个解决方案

#1

I turned off Turbolinks and it seems to be working so far. Looks like this may have been what was causing the issue, which isn't that surprising as I have run into issues with things not working as expected because of Turbolinks.

我关掉了土拨鼠，它似乎还在工作。看起来这可能是导致问题的原因，这并不奇怪，因为我遇到的问题是由于Turbolinks而不能正常工作。

#2

Have you added the following code after your foundation.js include and do you have any other javascript plugins that you are using? I have had this issue before with a JQuery image slider and fixed it by adding and putting my code between the braces. Hope this is some what useful if not I will do some more research into this and can hopefully help out!

在您的基础之后添加了以下代码。js包含并且您是否有其他正在使用的javascript插件?我以前遇到过JQuery图像滑块的问题，通过在大括号中添加和放置代码来修复它。希望这是一些有用的东西，如果不是，我将做更多的研究，并希望能有所帮助!

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

You should have this at the bottom of your file as well.

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

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