Bootstrap中的两个不同的可折叠菜单

Question

我在移动版本中有两个不同的可折叠菜单。一个用于全局区域，另一个用于默认的顶部导航。如果单击地球图标，则将区域显示为菜单如果单击菜单图标，则显示菜单链接。

我的要求是，如果用户点击地球图标，区域就会展开。现在，如果用户单击菜单图标，区域显示将折叠，菜单链接将展开。反之亦然。

请建议我们如何在Bootstrap3中实现这一点。

Answer 1

试试这个：

希望这能对你有所帮助

DEMO

<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" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" onclick="$('#bs-example-navbar-collapse-2').collapse('hide');">
        <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" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"> <a class="btn btn-link" data-toggle="collapse" href="#f1" data-parent="#accordion">Link1</a></li>
        <li> <a class="btn btn-link" data-toggle="collapse" href="#f2" data-parent="#accordion">Link2</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<section class="col-md-12">
    <div class="panel-group" id="accordion">
        <div class="panel">
            <div class="row panel-collapse collapse" id="f1">
                <p>Stuff 1</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse " id="f2">
                <p>Stuff 2</p>
            </div>
        </div>
    </div>
</section>