本文介绍了Bootstrap 导航栏折叠菜单不适用于 Turbolinks的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Bootstrap 导航栏折叠菜单不适用于 Turbolinks.
工作场景
页面加载时
<div class="navbar-collapse collapse" id="menu">
Bootstrap 导航栏折叠菜单不适用于 Turbolinks.
工作场景
页面加载时
<div class="navbar-collapse collapse" id="menu">点击菜单和下拉菜单
<div class="navbar-collapse in" id="menu" style="height: auto;">再次点击菜单并折叠
<div class="navbar-collapse collapse" id="menu" style="height: 1px;">不工作(导航到任何页面后)
页面加载时
相同的html，无需重复点击菜单和下拉菜单
相同的html，无需重复再次点击菜单并折叠
3.1.在调试器中观察到瞬态变化
<div class="navbar-collapsing" id="menu" style="height: 96px;">注意:class="navbar-collapsing" 和 高度:96px;
3.2.然后回到原来的状态
<div class="navbar-collapse in" id="menu" style="height: auto;">注意:与步骤 2 中的 html 相同.
库版本:
希望有人能给出真实的答案或解释.
这里负责的是 Turbolinks.解决方法是不加载 Turbolinks javascript.
在文件中
app/assets/javascripts/application.js
删除这一行
//= 需要 turbolinks
Bootstrap navbar collapse menu not working with Turbolinks.
Working scenario
On page load
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse collapse" id="menu"> </div>
Click menu and dropdown
<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>
Click menu again and collapse
<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>
Not working (after navigating to any page)
On page load
the same html, no need to repeat
Click menu and dropdown
the same html, no need to repeat
Click menu again and collapse
3.1. Transient change observed in the debugger
<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: class="navbar-collapsing" and height: 96px;
3.2. And then go back to the same state
<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>
Note: Same html as in step 2.
Libs versions:
I hope someone can come up with a real answer or an explanation.
The responsible here is Turbolinks. And the workaround is to not load the Turbolinks javascript.
In the file
app/assets/javascripts/application.js
Delete this line
//= require turbolinks
这篇关于Bootstrap 导航栏折叠菜单不适用于 Turbolinks的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！