引导选项卡导航崩溃类别

我一直在试图让标签导航系统工作，允许用户将标签折叠到类别标题。理想情况下，如果您选择了其他标签，那么类别会自动关闭，并且看起来都像选定的标签，并在选择时实际选择其组中的第一个标签。引导选项卡导航崩溃类别

截至目前，我的导航功能可以显示和隐藏某些标签，并且所有标签都可以工作，但它将可折叠组内的标签视为与外部标签不同的一组，因此，不会正确取消选项卡。我正在尝试使用JavaScript来补救这一点，但我还没有想出一个办法。任何对此的见解将不胜感激。

链接到jsFiddle上的代码。

<div class="row"> 
<div class="span4"> 
    <div class="side-nav-container affix-top"> 
     <ul class="nav nav-tabs nav-stacked"> 
      <li class="active"><a data-toggle="collapse" href="#Tab1">Tab1</a> 
      </li> 
      <div id="Tab1" class="collapse in"> 
       <ul class="nav nav-tabs nav-stacked" id="subnav"> 
        <li class="active"><a id="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li> 
        <li><a data-toggle="tab" href="#Subtab2">Subtab2</a></li> 
        <li><a data-toggle="tab" href="#Subtab3">Subtab3</a></li> 
       </ul> 
      </div> 
      <li><a data-toggle="tab" href="#Tab2">Tab2</a></li> 
      <li><a data-toggle="tab" href="#Tab3">Tab3</a></li> 
      <li><a data-toggle="tab" href="#Tab4">Tab4</a></li> 
     </ul> 
    </div> 
</div> 
<div class="span8"> 
    <div class="tab-content"> 
     <div class="tab-pane fade active in" id="Subtab1">Content 1a</div> 
     <div class="tab-pane fade" id="Subtab2">Content 1b</div> 
     <div class="tab-pane fade" id="Subtab3">Content 1c</div> 
     <div class="tab-pane fade" id="Tab2">Content 2</div> 
     <div class="tab-pane fade" id="Tab3">Content 3</div> 
     <div class="tab-pane fade" id="Tab4">Content 4</div> 
    </div> 
</div>

来源

2013-09-22 e Rac

任何理由，你为什么要使用引导过时的版本？我建议你至少升级到2.3.2 –

从2.3.1更新到2.3.2不会改变我注意到的任何事情。更新到3.0.0会使整个页面上的所有内容都爆炸，所以我应该弄清楚。无论哪种方式，我的问题所关心的问题都是一样的。 –

是的，我真的没有想到它会解决这个问题，我只是想知道你是否被要求使用2.2.1版本，是的更新版本3需要一些重构，因为一些类名称的变化，它绝对不是快速升级...无论如何，我认为我已经在V2中工作了，你可以查看下面的答案 –

我设法得到这个工作，但它需要在标记加上一些自定义的jQuery代码的一些细微变化。

这是updated fiddle。请注意，CSS也进行了更新以适应标记更改。

下面是生成的代码：

HTML

<div class="row"> 
    <div class="span4"> 
     <div class="side-nav-container affix-top"> 
      <ul class="nav nav-tabs nav-stacked"> 
       <li class="active"> <a data-toggle="collapse" href="#Tab1">Tab1</a> 
        <ul class="subnav nav nav-tabs nav-stacked collapse in" id="Tab1"> 
         <li class="active"><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li> 
         <li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a></li> 
         <li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a></li> 
        </ul> 
       </li> 
       <li><a data-toggle="tab" href="#Tab2">Tab2</a></li> 
       <li><a data-toggle="tab" href="#Tab3">Tab3</a></li> 
       <li><a data-toggle="tab" href="#Tab4">Tab4</a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="span8"> 
     <div class="tab-content"> 
      <div class="tab-pane fade active in" id="Subtab1">Content 1a</div> 
      <div class="tab-pane fade" id="Subtab2">Content 1b</div> 
      <div class="tab-pane fade" id="Subtab3">Content 1c</div> 
      <div class="tab-pane fade" id="Tab2">Content 2</div> 
      <div class="tab-pane fade" id="Tab3">Content 3</div> 
      <div class="tab-pane fade" id="Tab4">Content 4</div> 
     </div> 
    </div> 
</div>

jQuery的

$('.nav-tabs [data-toggle="collapse"]').on('click', function() { 
    //Prevent the subnav from collapsing 
    if ($($(this).attr('href')).hasClass('in')) return false; 
    //Make collapse links act like tabs 
    $(this).parent().addClass('active').siblings('li').removeClass('active'); 
    //Activate first subtab 
    $($(this).attr('href')).find('[data-toggle="tab"]').first().tab('show'); 
}); 

$('.nav-tabs > li > a').on('click', function() { 
    //Hide any open subnav only if it's not the collapse link 
    //also deactivate any active subtab 
    if ($(this).data('toggle') != 'collapse') { 
     $(this).closest('.nav-tabs').find('.collapse.in').collapse('hide').find('.active').removeClass('active'); 
    } 
});

来源

2013-09-24 05:57:48

引导选项卡导航崩溃类别

回答

相关问题