在引导程序中切换多个顶级菜单答案

【问题标题】：Toggle multiple topmenu's in bootstrap在引导程序中切换多个顶级菜单
【发布时间】：2014-02-06 16:52:09
【问题描述】：

我想在我的固定顶部菜单中切换多个菜单。由于某种原因，它不适用于 data-parent。

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>

谁能帮帮我？

【问题讨论】：

标签： javascript html css twitter-bootstrap-3

【解决方案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');"

【讨论】：

嗯，我的意思是当我打开折叠 1 时，它必须关闭折叠 2，反之亦然。数据目标工作正常

【解决方案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')
        }

});

【讨论】：