在引导程序中切换多个顶部菜单

Question

我想在固定顶部菜单中切换多个菜单。由于某种原因，它无法与数据父母使用。

http://jsfiddle.net/tz8bd/3/

html：

<nav class="navbar navbar-default topmenu" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" data-parent=".topmenu">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
       </button>
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" data-parent=".topmenu">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
       </button>
   </div>
       <div class="collapse" id="bs-example-navbar-collapse-1">
          <h1>test toggle 1</h1>
       </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="topmenu">
   <div class="collapse" id="bs-example-navbar-collapse-2">
     <h1>test toggle 2</h1>
   </div>
</div>

谁可以帮助我？

Answer 1

尝试像这样

演示：http：//jsfiddle.net/tz8bd/4/

 <div class="collapse" id="bs-example-navbar-collapse-1">
        <h1>test toggle 1</h1>
    </div>

将此div的侧面导航放置。使用按钮ONCLICK onclick="$('#bs-example-navbar-collapse-1').slideToggle('slow');"

Answer 2

我用一些自定义代码弄清楚了。在Bootstrap中的.panel元素似乎仅支持多个盒子之间的切换。

http://jsfiddle.net/tz8bd/6/

$('.topToggler').click(function(){
        var $this   = $(this);
        var target = $this.attr('data-target');
        var $target = $(target);
        var parent = $this.attr('data-parent');
        var $parent = $(parent)
        $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
        $target.collapse('toggle')
        $parent.find('.topToggler').not($this).addClass('collapsed');
        var actives = $parent.find('.in')
        if (actives && actives.length) {
          actives.collapse('hide')
        }
});