描述
使用Bootstrap的响应式导航栏,移动端(width < 768px)中的视觉为在右上角有一按钮控制导航的展开/收起。 现在有个需求是,展开导航栏,点击一个条目切换Tab之后,希望能够自动收起导航栏。 于是我的方案是在Tab显示时,模拟控制按钮的点击。
响应式导航栏代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <div class="navbar-header"> <button id="nav-btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">TITLE</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right" role="tablist"> ... </ul> </div>
|
js代码
1 2 3 4 5 6 7
| $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { if(!$("#nav-btn").is(":hidden")) { $("#nav-btn")[0].click(); } });
|