Bootstrap 导航栏折叠菜单不适用于 Turbolinks.
工作场景
页面加载时
点击菜单和下拉菜单
再次点击菜单并折叠
不工作(导航到任何页面后)
页面加载时
相同的html，无需重复点击菜单和下拉菜单
相同的html，无需重复再次点击菜单并折叠
3.1.在调试器中观察到瞬态变化
注意:class="navbar-collapsing" 和 高度:96px;
3.2.然后回到原来的状态
注意:与步骤 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
