Выпадающий список верхней панели Foundation 6 не закроется - PullRequest
Новая
       106

Выпадающий список верхней панели Foundation 6 не закроется

0 голосов
/ 22 октября 2018

Я добавил выпадающее меню к моей верхней панели, все подменю появляются, когда я наводю на него курсор мыши.

Проблема заключается в том, что после запуска сервера, когда я нажимаю на любую ссылку в моем приложении, все подменю выравнивается по вертикали в верхней панели и не исчезает.Когда я обновляю страницу клавишей F5, элементы подменю исчезают, но когда я нажимаю любую другую ссылку, они снова появляются в фиксированном положении, выровненном по ссылке раскрывающегося меню.

Перед наведением: before click situation

При наведении: on hover situation

После нажатия на любую ссылку в приложении: after click

Чтобы быть уверенным, что я не испортил это сам при описании внешнего интерфейса, я скопировал пример из 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 для синтаксиса и:

  • фундаментные рельсы 6.4.3.0
  • рельсы 5.1.6
  • ruby ​​2.5.1

Я проверил консоль javascript с помощью инструментов проверки broswer и там нет ошибок (также нет ошибок в журнале сервера).Я даже тестировал удаление турболинков в головке основного макета, но, конечно, это не повлияло.У меня заканчиваются мысли, как отлаживать дальше.

Мой макет приложения (верхняя панель находится в _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

1 Ответ

0 голосов
/ 23 октября 2018

Я turbolinks проблема: внутри javascript вашего приложения вы должны загрузить фундамент на turbolinks:load следующим образом: 

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

Посмотрите на здесь для получения дополнительной информации.

...