Question

Foundation 6响应式菜单在初始页面加载/刷新时显示移动版本，而不是“响应式”。当Turbolinks加载页面时，将显示适当的菜单，并且该菜单是“响应的”。 “响应式”表示在菜单之间切换的Javascript。

这很奇怪，因为通常的Turbolinks问题正好相反，它在初始页面加载时起作用，而在后续页面加载时不起作用。无论页面如何加载，所有其他与Foundation 6相关的Javascript（如模式）都可以按预期工作。

我刚刚移至Rails 5.2的更新版本。我使用的是5.2.1，Webpacker 3.5和Foundation 6.5.0-rc.4。一切都按预期进行。 Turbolinks尚未更改版本。

我现在正在使用Foundation 6.5.3，Rails 5.2.3，Webpack 4.34.0，Stimulus 1.1.1和Turbolinks 5.2.0。除使用必要的Rails和依赖项外，没有其他的Gems。我已经尝试过Foundation 6.5.3、6.5.2、6.5.1、6.5.0、6.5.0-rc.4、6.4.3。似乎没有任何一种恢复到正常行为。

我试图重新排序Webpack application.js打包文件以加载模块并初始化基础。我曾尝试在刺激控制器的初始化函数中初始化Foundation。我试过附加有和没有Jquery的侦听器。我拒绝在html末尾尝试内联脚本，并允许在我的CSP中使用unsafe-inline。我尝试过CSS解决方案，没有效果。我已经尝试弄乱data-show-for属性以及html可见性类，但这都没有帮助。我尝试添加和删除父元素，没有任何变化。浏览器控制台中没有错误。将“就绪”添加到“ turbolinks：load”的侦听器中不会执行任何操作。我一直在寻找其他Turbolinks侦听器尝试，但没有一个有意义。我尝试在turbolinks：load侦听器之外进行初始化，但仍然失败，但是这次在控制台显示错误，表明基础已初始化两次。（试图在已经具有Foundation插件的元素上初始化响应切换。）

我已经包含了所有相关文件来重现此问题，不幸的是，目前我没有现场站点。

rails new foundationtestsite -T -d postgresql -S --webpack=stimulus --skip-listen

package.json（已清除绒毛）

{
  ...,
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "actioncable": "^5.2.3",
    "activestorage": "^5.2.3",
    "foundation-sites": "^6.5.3",
    "jquery": "^3.4.1",
    "rails-ujs": "^5.2.3",
    "stimulus": "^1.1.1",
    "turbolinks": "^5.2.0",
    "webpack": "^4.34.0",
    "what-input": "^5.2.3"
  },
  ...
}

application.js（Webpack条目/打包文件）

import $ from 'jquery'
import jQuery from 'jquery'
import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import cable from 'actioncable';

// import "controllers"
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("controllers", true, /.js$/)

// Turbolinks
application.load(definitionsFromContext(context))
Turbolinks.start()

// images
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

// style sheets
import '../stylesheets/application.scss';

// foundation sites 6
import foundation from 'foundation-sites';
import '../javascripts/foundation_startup.js';

foundation_startup.js

import $ from 'jquery'
import jQuery from 'jquery'
import 'rails-ujs'
import 'foundation-sites'
$(document).on('turbolinks:load', function(){
    $(function(){ $(document).foundation() })
});

菜单中的

html（作为正文的第一个元素呈现）

<div data-controller="menu" data-target="menu.menu" class="cell shrink header medium-cell-block-container">

  <div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="medium" data-target="menu.titleBar">
    <button class="menu-icon" type="button" data-toggle="example-animated-menu"></button>
    <div class="title-bar-title">Menu</div>
  </div>

  <div class="top-bar" id="example-animated-menu" data-target="menu.topBar">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li><%= link_to "Home", root_path%></li>
      </ul>
    </div>
  </div>

</div>

使用turbolinks，“响应式”菜单在页面加载时显示移动设备，在随后的turbolinks加载中显示桌面

0 个答案: