将多个 Bootstrap 菜单合并为一个用于移动设备？

Question

我一直在看这个之前提出的问题：

Consolidate Multiple Bootstrap 3 navbar menus on collapse

它为这个问题提供了一个很好的解决方案，正如您在this fiddle 中看到的那样

问题是对于我当前的布局，这个解决方案并不完美。以下是它的显示方式：

它适用于我认为的其他场景，但在我的情况下，顶部导航栏将在移动设备上显示：无，因此页面上只有一个导航栏，一旦用户单击切换，它就不理想了新菜单中间的徽标和页面中间的切换按钮。

是否有可能最终显示如下：

我拥有更改 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>

Answer 1

所以我找到了答案，你可以通过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 并将其附加（在此处添加）到第二个列表。然后，一旦折叠不再是页面上的类，他就会再次将其删除。您可以在小提琴上看到不完美的解决方案。

Answer 2

隐藏移动设备的菜单 2。在菜单 1 中显示菜单 2 的所有项目。这些额外的菜单项应仅在移动设备上可用。