在我的Rails 4应用程序中,我使用的是Bootstrap的导航栏。当导航栏折叠时,它并不总是在点击时展开/切换。菜单图标显示,但当你点击它时,它不做任何事情:
x1c 0d1x的数据
我知道它与Turbolinks
有关,因为它从来不会在我手动输入视图的url时发生,只有在我点击链接后才会发生。而且,当我从应用程序中完全删除Turbolinks
时,它就会消失。
基于这些问题:
- Bootstrap dropdown stops working after I switch pages - Rails 4.2
- Bootstrap 3 dropdown doesn't work with Rails 4 & Turbolinks的
- Turbolinks not working - instead loads page twice的
- Bootstrap navbar collapse button unclickable in rails 4, bootstrap 3
我试过这些方法,但没有一个能解决这个问题:
1.将样式表和JavaScript移动到Body
1.为所有JavaScript和样式表设置data-turbolinks-track ='false' 1.为所有JavaScript和样式表设置
'data-turbolinks-eval' => false1.使用
jquery-turbolinks对我来说有趣的是,其他Bootstrap元素,比如菜单项,对我来说没有
Turbolinks的问题。 我知道我可以删除
Turbolinks`,但如果可能的话,我宁愿保留它。有什么方法可以做到这一点吗?
我的看法:
<nav class="navbar navbar-ct-danger navbar-fixed-top" role="navigation-demo" id="demo-navbar" data-no-turbolink ="false">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2" data-no-turbolink ="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<%= image_tag " logo.png"%>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigation-example-2" data-no-turbolink ="false">
<ul class="nav navbar-nav navbar-right">
<li>
<%= link_to "Games", games_path %>
</li>
<li>
<%= link_to "Days", days_path %>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-->
</nav>
字符串
Gemfile
gem 'jquery-rails', '4.0.5'
gem 'turbolinks', '2.5.3'
gem 'jquery-turbolinks', '2.1.0'
型
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
型
1条答案
按热度按时间3pmvbmvn1#
对于任何在2023年或之后使用Rails 7,Bootstrap 5和turbo-rails gem的人来说(因为是的,这仍然是一个问题,我花了几天时间试图解决它,因为没有旧的Rails 4/5 + jquery解决方案适用,因为Bootstrap 5不再使用jquery)我终于找到了解决问题的方法:
将
data-turbo="false"
添加到view layout .html.erb文件中最外层的导航栏HTML元素中。这似乎可以防止导航栏成为“没有真正重新加载”问题的牺牲品,但可以在其他地方使用turbo保持高性能。范例:
字符串
来自turbo官方文档:https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms