我一直在看这个以前问过的问题:
Consolidate Multiple Bootstrap 3 navbar menus on collapse
正如您在 this fiddle 中看到的那样,它为这个问题提供了一个很好的解决方案。
问题是对于我当前的布局,此解决方案并不完美。这是它的显示方式:
它适用于我想的另一种情况,但在我的情况下,顶部导航栏将在移动设备上显示:无,因此页面上只会有一个导航栏,一旦用户单击切换按钮,它就不理想了新菜单中间的 Logo 和页面中间的切换按钮。
是否可以像这样进行最终显示:
我拥有更改 HTML 结构或添加任何其他 javascript 的完全访问权限,但我无法更改第二个导航栏上 Logo 的设计。
当前的 HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a> </li>
</ul>
<div class="navbar-right">
<select><option>My Portfolio</option></select>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="navbar-right" role="search">
<ul class="nav navbar-nav">
<li><a href="#">Stuff</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
最佳答案
所以我找到了答案,你可以通过this fiddle.看到
基本上我拿了this answer (funny it's by the same person who answered the question I linked above)并且只是使用前置而不是追加。
使用的js:
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
$('#bs-example-navbar-collapse-1').prepend($('#sidebar').html());
});
$('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function () {
$('#bs-example-navbar-collapse-1 .top-nav').remove();
});
$(window).on('resize', function () {
if (window.innerWidth > 768) {$('#bs-example-navbar-collapse-1').collapse('hide');}
});
他从第一个列表 #sidebar 中取出 HTML 并将其附加(在此处添加)到第二个列表中。一旦折叠不再是页面上的类,他就会再次将其删除。您可以在 fiddle 上看到不完美的解决方案。
关于javascript - 将多个 Bootstrap 菜单合并为一个用于移动设备?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33223030/