Javascript 为移动设备将多个引导菜单合并为一个?
我一直在看之前提出的这个问题: 它为这个问题提供了一个很好的解决方案,正如您在 问题是,对于我目前的布局,这个解决方案并不完美。以下是它的显示方式:Javascript 为移动设备将多个引导菜单合并为一个?,javascript,jquery,twitter-bootstrap,twitter-bootstrap-3,responsive-design,Javascript,Jquery,Twitter Bootstrap,Twitter Bootstrap 3,Responsive Design,我一直在看之前提出的这个问题: 它为这个问题提供了一个很好的解决方案,正如您在 问题是,对于我目前的布局,这个解决方案并不完美。以下是它的显示方式: 它适用于其他场景,但在我的情况下,顶部的Navar将被显示:在移动中没有一个,所以页面上只有一个Navar,一旦用户点击切换,在新菜单的中间和在页面的中途切换标志就不理想了。 是否可以进行如下最终显示: 我完全有权更改HTML的结构或添加任何其他javascript,但我无法更改第二个导航栏上的徽标设计 当前HTML: <nav cla
它适用于其他场景,但在我的情况下,顶部的Navar将被显示:在移动中没有一个,所以页面上只有一个Navar,一旦用户点击切换,在新菜单的中间和在页面的中途切换标志就不理想了。 是否可以进行如下最终显示:
我完全有权更改HTML的结构或添加任何其他javascript,但我无法更改第二个导航栏上的徽标设计 当前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>
我的投资组合
切换导航
所以我找到了答案,你可以通过
基本上我只是使用prepend而不是append
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');}
});
他从第一个列表侧边栏中提取HTML,并将其添加到第二个列表中。当折叠不再是页面上的类时,他再次移除它。你可以在小提琴上看到不完美的解决方案。隐藏手机菜单2。在菜单1内显示菜单2的所有项目。这些附加菜单项应仅在手机上可用