Question

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

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

悬停之前：

悬停时：

点击应用中的任何链接后：

为确保在描述前端时不会弄乱自己，我直接从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用于语法和：

Foundation-rails 6.4.3.0
导轨5.1.6
红宝石2.5.1

我使用浏览器检查工具检查了javascript控制台，并且那里没有错误（服务器日志中也没有错误）。我什至进行了测试，删除了主布局磁头中的turbolink，但是这当然没有影响。我已经没有办法进一步调试了。

我的应用程序布局（顶部栏位于_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顶部栏下拉菜单不会关闭

1 个答案: