Bootstrap 导航栏折叠菜单不适用于 Turbolinks

2024-01-23

Bootstrap 导航栏折叠菜单不适用于 Turbolinks。

工作场景

  1. 页面加载时

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
    <div class="navbar-collapse collapse" id="menu"> </div>
    
  2. 单击菜单和下拉菜单

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
    <div class="navbar-collapse in" id="menu" style="height: auto;"> </div>
    
  3. 再次单击菜单并折叠

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> </button>
    <div class="navbar-collapse collapse" id="menu" style="height: 1px;"> </div>
    

不起作用(导航到任何页面后)

  1. 页面加载时

    the same html, no need to repeat
    
  2. 单击菜单和下拉菜单

    the same html, no need to repeat
    
  3. 再次单击菜单并折叠

    3.1.在调试器中观察到的瞬时变化

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
    
        <div class="navbar-collapsing" id="menu" style="height: 96px;"> </div>
    

    Note: 类=“导航栏折叠” and 高度:96 像素;

    3.2.然后回到同样的状态

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
        <div class="navbar-collapse in" id="menu" style="height: auto;"> </div>
    

    注意:与步骤 2 中相同的 html。

库版本:

  • 涡轮链接2.1.0
  • jQuery 2.0.3
  • 引导程序3.0.3

我希望有人能给出一个真正的答案或解释。


这里的负责人是Turbolinks。解决方法是不加载 Turbolinks javascript。

在文件中

app/assets/javascripts/application.js

删除这一行

//= require turbolinks

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

Bootstrap 导航栏折叠菜单不适用于 Turbolinks 的相关文章

  • Bootstrap 日期选择器切换禁用

    我正在使用 bootstrap datepicker 并遇到问题 当我点击某一天时 效果很好 但是当我再次点击同一天时 效果很好 选择被取消 The 引导日期选择器演示 http eternicode github io bootstrap
  • jQuery Datepicker showAnim 没有动画

    我尝试了多种方法并在互联网上搜索 试图让动画发挥作用 但一无所获 我有日期选择器工作和日期格式选项 但没有动画 我希望使用 剪辑 选项 以下是各个文件中的内容 应用程序 js require jquery require jquery tu
  • 按共同关联的数量排序 (Rails)

    背景 我有帖子和用户 并且都有很多社区 客观的 对于任何给定的用户 我想返回一个帖子集合 按该帖子与该用户有共同社区的数量排序 具有更多共同社区的帖子位于更高的位置 我当前的尝试 使用排序方法 有效 Post includes commun
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • Bootstrap 3 工具提示被包裹在每个空白处?

    升级到 bootstrap 3 后 工具提示会包裹在每个空白处 我相信这是由于网格而发生的 因此 如果我为文本框选择列 col sm 3 并且如果我将工具提示放在右侧 它将包裹所有空白并显示如下 如果我执行 data placement t
  • Rails csv 格式的原始查询,通过控制器返回

    我使用 Active Record 来获取我的故事 然后生成 CSV 这是在 Rails Cast 中完成的标准方法 但我有很多行 需要几分钟 我想如果我能让 posgresql 来做 csv 渲染 那么我可以节省一些时间 这是我现在所拥有
  • 如果不选择 Updated_at 属性,则无法更新 Rails 4 中的模型

    我正在从 Rails 3 2 13 升级到 4 并遇到更新模型的问题 我正在尝试仅更新模型上的单个属性 其中我只有 id 我还需要验证和回调 这在 Rails 3 中运行良好 但在 Rails 4 中遇到了麻烦 在 Rails 4 中 如果
  • facebook 评论插件仅在刷新后显示

    我正在尝试使用 Facebook 评论插件 我有这个代码 我在打开后添加标记并在关闭之前也尝试过喜欢建议的here https stackoverflow com questions 13055087 facebook comments b
  • 在 Rails 4 中使用 AJAX 进行搜索、排序和分页

    我正在尝试进行实时搜索导轨4 0 1应用 我用的是Railscasts 240 教程 http railscasts com episodes 240 search sort paginate with ajax view asciicas
  • 在 Bootstrap 3 中的工具提示中添加换行符

    我正在使用 Bootstrap 3 并向我的 div 添加了一个工具提示 我尝试过使用 n 和 创建新行 Bootstrap 会阻止我吗 div class content show tooltip 你需要添加data html true
  • 表单提交按钮仅在重新加载后才有效

    我有一个构建表的索引页 我试图允许用户编辑表中的行 我试图以最基本的方式做到这一点 没有 javascript ajax 等 除非 Rails 提供了它 我的表在索引方法中显示良好 并且有一个表单作为表中的最后一行 可用于添加新行 新的形式
  • 如何从 Rails 中的枚举值获取键名?

    我的模型中有一个与数据库中的列相对应的枚举 枚举看起来像 enum efficency High 0 Medium 1 Low 2 如何从值中获取密钥 例如 我的值为 0 我需要获取值 High 任何帮助 将不胜感激 Model effic
  • Rails 4 - 如何在活动记录查询中为includes()和joins()指定别名

    我如何给出别名 例如includes 给出如下 用户 活动记录模型 Student 活动记录模型 继承自User STI Teacher 活动记录模型 继承自User STI 项目 活动记录模型 这里有一些例子 第一个案例 更多性传播感染协
  • 如何左对齐 Bootstrap 3 下拉菜单?

    在上图中 MenuItems 与 MyMenu 的右侧对齐 我需要将 MyMenu 的 MenuItems 左对齐 我的意思是它必须与 MyMenu 的左边缘对齐 我尝试使用 pull left 和 pull right 类 例如 ul c
  • Rails 会话间歇性重置

    我知道这个主题已经被讨论了很多 但我相信我已经找到了它的一个新变体 我有一个 Rails 4 应用程序 它是从 Rails 3 升级的 并且具有rails ujs and csrf meta tags设置正确 一旦root url在浏览器中
  • 视频无法使用 Paperclip Gem - Rails 中的 ffmpeg 上传

    我可以上传图像 但是 当我尝试上传视频时 它会显示为黑屏 并且播放按钮不起作用 我不确定我哪里错了 我需要视频播放器才能实现此功能吗 这可能是一个简单的解决方案 但是 我是 Rails 新手 任何帮助是极大的赞赏 谢谢 邮政模型 class
  • Angular UI bootstrap 手风琴 - 展开创建可滚动和页面“跳转”

    我正在使用 Angular ui 引导手风琴 一切都很好 除了当我展开一个足够大的手风琴部分时 浏览器会显示页面的滚动条 整个页面会向左摇动滚动条的宽度 当手风琴足够小以至于不需要滚动条时 页面会恢复到原始大小 我不知道该怎么办 这是否需要
  • 使用 Bootstrap 3 具有固定高度、标题和列宽度的表格

    我想要一张具有以下功能的表 固定标题 固定高度 带有可见的滚动条 3个固定宽度的列 一个大列和两个窄列 我开始使用 tbody display block overflow auto height 100px 为了至少获得固定高度 但此规则
  • 在特定页面上执行 javascript 的正确“Rails”方式

    我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式 我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
  • 带回形针、导轨的水印图像 4

    我一直在尝试按照中列出的答案向我的图像添加水印带有回形针的水印 https stackoverflow com questions 13517757 watermark with paperclip 水印 rb module Papercl

随机推荐

  • 我应该从 getFft 看到什么样的输出?

    好吧 我正在努力创建一个 Android 音频可视化应用程序 问题是 我从 getFft 方法中得到的结果与谷歌所说的它应该产生的结果不一致 我一直追溯到 C 源代码 但我对 C 或 FFT 不够熟悉 无法真正理解正在发生的事情 我将尝试包
  • sifr3 - 预取不起作用?

    我在启用 sifr 3 的网站的加载时间 大小方面遇到问题 并发现在我的应用程序中多次请求字体 swf 这可以在 firebug 的网络选项卡以及 apache 日志中看到 On http novemberborn net flash pr
  • 如何在Castle.DynamicProxy中使用IInterceptor?

    我写了一个这样的例子 简单计算器类 public class Calculator public int Add int a int b return a b 实现了DynamicProxy提供的 IInterceptor Serializ
  • 为什么“reset_index(drop=True)”函数会意外删除列?

    我有一个名为的 Pandas 数据框数据匹配 它包含 worker id unit id 和 caption 列 请参阅随附的屏幕截图 了解此数据框中的某些行 假设索引列不是按升序排列 我希望索引为 0 1 2 3 4 n 并且我希望它按升
  • 在 PubNub Swift 中访问 PNMessageResult

    请参阅此链接 http www pubnub com blog realtime ios apps getting started with swift and pubnub 基于以下功能我能够收到响应 func client client
  • Java MySQL 更新查询

    我收到错误 无法发出数据 这里是SSCCE package mysqltest import java awt import java awt event import javax swing import java applet Appl
  • 使用 Angular 5 分析 asp.net core 2(Web api)

    我正在寻找以下环境的分析解决方案 有人可以建议吗 net471 上的 ASP NET Core 2 实体框架 6 2 0 角度 5 0 0 我调查了迷你分析器 Glimpse Glimpse 尚未升级至 Core 2 0 MiniProfi
  • 实现最快运行时间的算法(问题、解决)

    对于算法竞赛训练 不是家庭作业 我们在过去一年中收到了这个问题 将其发布到此站点是因为其他站点需要登录 这就是问题 http pastehtml com view c5nhqhdcw html http pastehtml com view
  • 如何使用 NodeJS 创建流 API

    您将如何创建一个流 APINode http nodejs org 就像Twitter 流媒体 API http apiwiki twitter com Streaming API Documentation 我最终想做的是从FriendF
  • 如何克隆 Date 对象?

    分配一个Date变量到另一个变量会将引用复制到同一实例 这意味着改变一个就会改变另一个 我怎样才能真正克隆或复制Date实例 Use the Date https developer mozilla org en Core JavaScri
  • flutter android main 函数被调用两次

    在我的 flutter 应用程序中 我注意到 main 函数执行了两次 我正在使用计数器应用程序中的示例代码 文本main function被打印两次 我的 AndroidManifest xml 如下
  • 更改前缀后 npm 没有响应

    我最近尝试通过 npm 更新 IONIC CLI 安装成功了几次 但 CLI 版本没有改变 经过研究 我决定更改 npm 前缀 然后 IONIC strated 抛出 bash IONIC 命令未找到 然后我做了进一步的研究 之后我通过 w
  • “强制停止”将 Activity 留在其生命周期的哪个位置?

    假设我的应用程序已启动并正在运行 然后我进入我的设备主屏幕 导航设置 gt gt 应用程序 gt gt 管理应用程序 选择我的应用程序 然后按Force stop Which Activity下次打开应用程序时会调用方法吗 在我因不检查自己
  • 无法保持对 Selenium Python 驱动程序中元素的关注

    我试图通过 python 控制网络来运行脚本并下载相应的 csv 文件 以下是网页的外观 其中包含仪表板菜单 可单击 搜索 其他按钮 单击 搜索 按钮后 它会显示一个 搜索 文本框 可以在其中输入代码并按 Enter 键运行 现在我需要找到
  • Java JNA UCHAR 和 PUCHAR

    我正在寻找一个Java字符串 WLANHostedNetworkSetSecondaryKey and WLAN 托管网络设置属性 一个想要一个带有 CHAR 的结构内的结构 第一个想要一个 PUCHAR 我尝试使用字符串 char byt
  • 在 Linux 中设置 ADT 时出现错误消息

    我安装了 Ubuntu 11 10 安装了 GNOME 3 取代了 Unity 从 Ubuntu 软件中心安装了 Eclipse 安装了 android sdk 和 ADT 现在 当我启动 eclipse 时 我收到一条消息 Failed
  • 如何从 ISecurityTokenValidator 正确获取依赖范围的服务

    在我的 asp net core 2 0 Web 应用程序中 我有一个自定义ISecurityTokenValidator它验证令牌 它依赖于存储库来进行数据库查找 存储库本身被设置为范围依赖项 services AddScoped
  • 如何设置Arcgis Javascript dojoConfig包的相对路径

    我正在使用 Arcgis Javascript API API 构建于 dojo 工具包之上 所以我需要在API中使用dojo功能 我正在准备 dojo 配置文件 如下所示 var pathRegex new RegExp var loca
  • 使用 JMS 序列化器仅将实体关系序列化到 Id

    我正在尝试使用 JMS Serializer 序列化实体关系 这是实体 class Ad Type string Groups manage var string private description Type Acme SearchBu
  • Bootstrap 导航栏折叠菜单不适用于 Turbolinks

    Bootstrap 导航栏折叠菜单不适用于 Turbolinks 工作场景 页面加载时