Foundation 6 顶栏下拉菜单不会关闭

Question

我在顶部栏添加了一个下拉菜单，当我将鼠标悬停在它上面时，所有的子菜单都会出现。

问题是在启动服务器之后，当我在我的应用程序中单击任何 link 时，整个子菜单在顶部栏中垂直对齐并且不会消失.当我使用 F5 刷新页面时，子菜单项消失，但当我单击任何其他 link 时，它们再次出现在固定位置，在下拉菜单 link.

下对齐

悬停前：

悬停时：

在应用程序中点击 link 后：

为了确保我在描述前端时没有搞砸，我直接从 Foundation page 复制粘贴了示例：

.top-bar    
  .top-bar-left
  ul.dropdown.menu data-dropdown-menu=''
    li.menu-text Site Title
    li
      a href="#"  One
      ul.menu.vertical
        li
          a href="#"  One
        li
          a href="#"  Two
        li
          a href="#"  Three
    li
      a href="#"  Two
    li
      a href="#"  Three

我使用 slim 作为语法并且：

基础-rails 6.4.3.0
rails 5.1.6
ruby2.5.1

我用浏览器检查工具检查了 javascript 控制台，那里没有错误（服务器日志中也没有错误）。我什至测试了删除主布局头部中的 turbolinks，但当然它没有影响。我运行想不出如何进一步调试。

我的应用程序布局（顶部栏位于 _navbar 部分中，在正文中呈现）：

doctype html
  html lang= I18n.locale.to_s
    head
      meta charset='utf-8'
      meta name='viewport' content='width=device-width, initial-scale=1.0'
      title == content_for?(:title) ? yield(:title) : t('general.home')

      = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
      = include_gon(init: true)
      = javascript_include_tag 'application'
      = javascript_include_tag 'https://www.gstatic.com/charts/loader.js'
      = csrf_meta_tag
      = favicon_link_tag 'favicon.ico'

    body
      .main
        = render 'layouts/navbar'
        = render 'layouts/title', title: @title
        = render 'layouts/messages'
        = yield

还有我的应用程序javascript（如果以某种方式重新加载库的顺序应该重要的话）：

//= require jquery
//= require rails-ujs
//= require turbolinks
//= require rails.validations
//= require rails.validations.simple_form
//= require foundation
//= require chartkick
//= require ckeditor/init
//= require_tree .

$(function(){ $(document).foundation() })

这里描述了类似的问题，但解决方案对我不起作用：https://foundation.zurb.com/forum/posts/38667-foundation-62-topbar-dropdown-issue

Answer 1

这是一个 turbolinks 问题：在您的应用程序中 javascript 您应该像这样在 turbolinks:load 上加载基础：

$(document).on('turbolinks:load', function() {
  $(function(){ $(document).foundation() })
})

查看 here 了解更多信息。

Foundation 6 顶栏下拉菜单不会关闭

Foundation 6 top-bar dropdown won't close

ruby-on-rails

drop-down-menu

zurb-foundation

slim-lang

zurb-foundation-6