Twitter bootstrap 引导中的两个不同的可折叠菜单

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

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

请告知我们如何在Bootstrap3中实现这一点。

尝试以下方法：

希望这会有帮助

切换导航




材料1

材料2

你能做一把JS小提琴，展示一下你想做什么，然后我们就可以很容易地帮助你了。代码不知道怎么回事，它不起作用了。我有一个导航条。它包含两个不同的链接。这两个链接应该有不同的菜单，应该是可折叠的。如果你的问题解决意味着请勾选我的答案MonicaI勾选你的答案。谢谢，杰克：）

<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>