Foundation 5 顶栏在 Rails 4 中无法一致工作

2023-11-27

我在 Rails 4 应用程序中使用 Foundation 5。当我发送请求时,顶栏菜单工作正常。我可以悬停项目和嵌套项目没有问题。然后,我单击其中一个项目,该项目具有与其关联的 link_to 方法。有时它会给出正确的结果,我的菜单仍然可以完美运行,但有时整个事情都会冻结。这也使得移动菜单的后退按钮消失。一旦我通过刷新或网址发送新请求,菜单就会再次工作。

Rails 在日志文件中没有看到任何问题。我的菜单在轨道之外工作正常。我想知道这是否与我的 link_to tag_helpers 或我在应用程序中设置基础的方式有关?

下面是关于如何为基础路由 JS 的快速概述。 (他们在文档中建议的配置) 视图/布局/application.html.erb:

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <%= stylesheet_link_tag    "application" %>
 <%= javascript_include_tag "vendor/modernizr" %>
</head>   
<body>     
  <%= javascript_include_tag "application" %>     
</body>

资产/application.js:

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

$(document).foundation();

还有其他人遇到过这个问题吗?除了不使用 Foundation 5 还有什么好的解决方案吗?

谢谢 亚历克斯


Foundation 已知 Turbolinks 存在问题,您的问题可能就是由此引起的。

要解决此问题,您可以禁用 Turbolinks 并查看顶部栏是否仍然存在问题。

这是一个简单的指南:http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4 .

除此之外,如果您必须拥有 Turbolinks,Turbolinks 就是问题所在。您可以尝试添加 jquery Turbolinks,如下所示:https://github.com/kossnocorp/jquery.turbolinks .

如果问题仍然存在,下一步将是检查您导入 javascript 文件的顺序(这对于这些 Turbolinks/Foundation 问题很重要),这样您可能会感到满意。 我没有确切的顺序让您将它们放入,但如果您搜索“Turbolinks Foundation”问题,您最终会偶然发现一些解决方案。 这不一定是特定的解决方案,但它'将引导您走向正确的方向。

Update:尝试按此顺序导入您的 javascript 资源。并且,引用source:

Its important to put all the Javascripts to be loaded inside the tag. The order of inclusion of jQuery is important – ensure you load jquery.turbolinks before turbolinks and after jquery. Include all your custom js between jquery-turbolinks.js and turbolinks.js in your application.js
// app/assets/javascript/application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs

//= require foundation
//= require jwplayer/jwplayer.js
//= require asset_videos

//= require turbolinks

Note:看着亚历克斯·奥布的回答在此页面上获取其他有用信息。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Foundation 5 顶栏在 Rails 4 中无法一致工作 的相关文章

  • Eslint errorring 导入没有扩展名的 jsx

    我正在尝试在 es6 中导入 jsx 文件而不需要 jsx 扩展名 import LoginErrorDialog from LoginErrorDialogView Not import LoginErrorDialog from Log
  • 为什么 iife 在一个简单的例子中不起作用?

    我不明白为什么函数表达式调用不起作用并抛出错误 你能给我解释一下吗 var a function x alert x function a 1 谢谢大家 任务比我想象的要容易得多 这是因为 JS 将 IIFE 解析为函数的参数调用 这样做时
  • 如何更改 Google Maps v3 API for Directions 中的开始和结束标记图像

    我使用 DirectionsRender 绘制了一条路线 但我不知道如何用我自己的标记替换通用的 Google 标记 我知道并在正常的谷歌地图情况下使用它 但发现很难用开始和结束的方向标记来做到这一点 如果这是一个愚蠢的问题 感谢您的任何建
  • 使用 Passenger + Apache 相对于 Webrick 的优势

    我想说服我的管理层 使用 Apache 乘客设置是继续生产的方法 而不是使用 webrick 或 mongrel 我从网上找到了一些观点 如果您能添加您的想法 那将非常有帮助 因为这将有力地帮助我表达我的观点 欢迎提供技术细节 如果您有任何
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 将 Rack::Deflater 插入机架中的哪个位置?

    我目前有以下内容 use Rack Rewrite use Rack Cache verbose gt true metastore gt memcached localhost 11211 rack cache meta entityst
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 升级到 Rails 6 时是否有一种编程方法可以检测 Zeitwerk::NameError?

    我目前正在将旧的 Rails 应用程序迁移到 Rails 6 好像项目中有些文件和里面定义的类不一致 运行应用程序测试时我没有看到此错误 但部署后我收到如下错误 Zeitwerk NameError expected file app my

随机推荐

  • 让 Maven 和 SBT 使用本地 Artifactory 服务器

    我需要让 Maven 和 SBT 使用本地 Artifactory 服务器 这是唯一具有 Internet 连接的机器 服务器 CI 机器等无法访问外部世界 尤其是SBT让我头发变白了 SBT 连接到 Artifactory 时出现问题 使
  • 如何使用 jQuery 比较两个日期选择器日期

    这是我的代码 var from fromDate datepicker getDate var to toDate datepicker getDate if from gt to alert from date shouldn t gre
  • 设置绘图的自动缩放限制,以便在所有点周围都有缓冲区

    我想在 matplotlib 中使用 pyplot 绘制一组点 但没有一个点位于轴的边缘 自动缩放 或其他东西 设置xlim and ylim这样第一个点和最后一个点通常位于x xmin or xmax在某些情况下导致阅读困难 这更经常出现
  • 如何解读分析结果?

    我使用 NetBeans 和 VisualVM 运行内存分析器并收到结果 但不知道如何分析其结果 我研究了这个article但它没有教导或提供如何解释结果的线索 我也发现了这个article关于解释 Netbeans 4 上的结果 但我正在
  • 自调用函数内的递归函数上的 setTimeout()

    我想将我的代码作为自调用匿名函数分发 正如我看到的许多人所做的那样 另外 在我的代码中 我必须监视另一个库的加载 这样我就可以在它可用时使用它 function window document undefined staffHappens
  • Google Drive Sdk - iOS 应用程序中的音频和视频流

    嗨 Google 云端硬盘工作人员 我已经尝试过从 Google 云端硬盘流式传输视频文件 无需下载 但我收到登录提醒 我已经彻底检查了 Dr Edit 示例应用程序 但没有找到任何解决方案 我尝试过downloadUrl embedLin
  • Android应用程序盗版预防[关闭]

    Closed 这个问题是无关 目前不接受答案 看看 stackoverflow 上的一些帖子 截至撰写本文时 似乎确实没有办法有效防止应用程序盗版 这里真的有人因应用程序盗版而蒙受损失吗 您当前针对应用程序破解者的解决方案 免费或非免费 是
  • NSString nslog 显示“\n”换行符

    我想记录一个 NSString 但当我记录它时 它不显示新行字符 n 我怎样才能做到这一点 谢谢 您可以先处理该字符串并替换所有出现的 n with n NSString newString originalString stringByR
  • 图像中的 r 轴标签

    我需要按呼叫中心的空间位置绘制指标图表 我用 R 写了一个小例子 tt lt data frame a1 c 0 4 5 5 7 a2 c 5 6 7 8 a3 c 8 7 9 8 row names tt lt paste L 1 4 s
  • 如何使用 SharedPreferences [重复]

    这个问题在这里已经有答案了 我是 Android 开发新手 使用一本名为 Sams Teach Yourself Android Application Development in 24 hours 的书 到目前为止 但在尝试使用 Sha
  • 在 Visual Studio 2010 中,如何搜索不在单行注释内的文本?

    在 Visual Studio 2010 中 如何搜索不在单行注释内的文本 例如 如何在以下位置找到 bas foo bar bas 但不在 foo bar bas 请注意 它应该找到以下行 foo bar bas 编辑 它不应该找到该行
  • 相同的 Ajax 调用了两次..JQuery

    我在 JQuery 中有一个问题 我正在使用 ajax 在我的代码中 Function 1 将字段名和序列号发送到 ctrller 后者通过以下方式获取数据 POST name and POST sequenceno 并使用未给定的序列更新
  • Math.Round 返回奇数向上舍入,但偶数向下舍入

    我正在尝试使用数学循环找到一个浮点数 我发现了以下内容 0 5 gt 0 1 5 gt 2 2 5 gt 2 3 5 gt 4 等等 我相信这是由于浮点错误造成的 但不太确定是如何造成的 我怎样才能解决这个问题 以便偶数正确舍入 From
  • 避免 Android Market 对可选使用位置进行过滤

    在我的应用程序中 我尝试使用位置信息 如果可用 因此 我的清单中有这些权限 e g
  • 对列中的每个单元格应用函数并将结果添加到新列

    我有一个 data table 如下所示 我想要的是将一个函数应用于 C 列中的每个元素 该函数将接受一个向量 因为 Col C 包含向量元素 并返回另一个向量 应将所得向量添加到新列中 A B C 1 16 151 c 2579 2659
  • Yii框架登录后重定向页面

    我是 Yii 框架的新手 在 Yii 中 当您默认登录时 它会重定向到索引页面 我希望当我登录 Yii 时 页面将重定向到另一个页面而不是索引页面 那么任何人都可以帮助我吗 任何帮助或建议将非常感激 edit 当我使用用户模块时 重定向将如
  • 显示与线连接的树视图项目?

    有没有办法让树视图在展 开项目时显示连接项目的线 Thanks 您必须替换 TreeViewItem 控件模板才能实现这一点 看着MSDN 上的这个线程应该有您需要的所有信息
  • XSLT:更改节点内部文本

    我需要转换以下 xml 文档 a b b a
  • pandas散点矩阵显示相关系数

    我试图找到一种方法来显示 pandas 散点矩阵的下三或上三中的相关系数 有人能指出我正确的方向吗 谢谢 一个最小的工作示例 import matplotlib pyplot as plt import pandas as pd impor
  • Foundation 5 顶栏在 Rails 4 中无法一致工作

    我在 Rails 4 应用程序中使用 Foundation 5 当我发送请求时 顶栏菜单工作正常 我可以悬停项目和嵌套项目没有问题 然后 我单击其中一个项目 该项目具有与其关联的 link to 方法 有时它会给出正确的结果 我的菜单仍然可