带折叠类别的Bootstrap选项卡式导航 [英] Bootstrap Tabbed Nav with Collapsing Categories

问题描述

我一直试图让标签导航系统工作，允许用户将标签折叠到类别标题中。理想情况下，如果您选择一个标签以外的类别，这些类别会自动关闭，并且看起来像是一个选定的标签，并且在选择时会实际选择其组中的第一个标签。

到目前为止，我的导航功能可以显示和隐藏某些标签，并且所有标签都可以工作，但它将可折叠组内的标签视为与外部标签不同的标签，因此，不正确取消选择标签。我正在尝试使用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 =collapsehref =＃Tab1> Tab1< / a> 
< / li> 
< div id =Tab1class =collapse in> 
< ul class =nav nav-tabs nav-stackedid =subnav> 
< li class =active>< a id =subnavtabdata-toggle =tabhref =＃Subtab1> Subtab1< / a>< / li> 
< li>< a data-toggle =tabhref =＃Subtab2> Subtab2< / a>< / li> 
< li>< a data-toggle =tabhref =＃Subtab3> Subtab3< / a>< / li> 
< / ul> 
< / div> 
< li>< a data-toggle =tabhref =＃Tab2> Tab2< / a>< / li> 
< a>< a data-toggle =tabhref =＃Tab3> Tab3< / a>< / li> 
< li>< a data-toggle =tabhref =＃Tab4> Tab4< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< div class =span8> 
< div class =tab-content> 
< div class =tab-pane fade active inid =Subtab1> Content 1a< / div> 
< div class =tab-pane fadeid =Subtab2> Content 1b< / div> 
< div class =tab-pane fadeid =Subtab3> Content 1c< / div> 
< div class =tab-pane fadeid =Tab2>内容2< / div> 
< div class =tab-pane fadeid =Tab3> Content 3< / div> 
< div class =tab-pane fadeid =Tab4> Content 4< / div> 
< / div> 
< / div> 
  

解决方案

我设法实现了这个功能，但它需要对标记和一些自定义jQuery代码稍作修改。 这里是 更新小提琴 。请注意，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 =collapsehref =＃Tab1> Tab1< / a> 
 
< li class =active>< a class =subnavtabdata-toggle =tabhref =＃Subtab1> Subtab1< / a>< / li> 
< li>< a class =subnavtabdata-toggle =tabhref =＃Subtab2> Subtab2< / a>< / li> 
< li>< a class =subnavtabdata-toggle =tabhref =＃Subtab3> Subtab3< / a>< / li> 
< / ul> 
< / li> 
< li>< a data-toggle =tabhref =＃Tab2> Tab2< / a>< / li> 
< a>< a data-toggle =tabhref =＃Tab3> Tab3< / a>< / li> 
< li>< a data-toggle =tabhref =＃Tab4> Tab4< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< div class =span8> 
< div class =tab-content> 
< div class =tab-pane fade active inid =Subtab1> Content 1a< / div> 
< div class =tab-pane fadeid =Subtab2> Content 1b< / div> 
< div class =tab-pane fadeid =Subtab3> Content 1c< / div> 
< div class =tab-pane fadeid =Tab2>内容2< / div> 
< div class =tab-pane fadeid =Tab3> Content 3< / div> 
< div class =tab-pane fadeid =Tab4> Content 4< / div> 
< / div> 
< / div> 
< / div> 
  

jQuery
< （'click'，function（）{
//防止subnav从（'.c $ c'）$（'。nav-tabs [data-toggle ='collapse' （$（$（this）.attr（'href'））。hasClass（'in'））返回false;
//使折叠链接像标签一样操作
$（这个）.parent（）。addClass（'active'）。siblings（'li'）。removeClass（'active'）;
//激活第一个子选项卡
$（$（this）.attr（ '（'href'））。find（'[data-toggle =tab]'）。first（）。tab（'show'）;
}）; （'click'，function（）{
//隐藏任何打开的subnav，只有当它不是崩溃的时候（$（this）.data（'toggle'）！='collapse'）{
$（this）.closest（'。nav）链接
//也停用任何活动的子选项卡
（'。'）。find（'。collapse.in'）。collapse（'hide'）。find（'.active'）。removeClass（'active'）;
}
}）;

I have been trying to get a tabbed nav system working that allows the user to collapse tabs into category headings. Ideally the categories would automatically close if you select a tab outside of them, and would both look like a selected tab and actually select the first tab in their group when selected.

As of now, I have the nav functioning with the ability to show and hide certain tabs and all of the tabs work, but it is treating the tabs inside of the collapsible group as a different set from those outside it and, as such, does not deselect tabs properly. I was trying to remedy this using javascript, but I haven't figured out a way. Any insights into this would be greatly appreciated.

Link to the code on 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>

解决方案

I managed to get this working but it required some slight changes in the markup plus some custom jQuery code.

Here's the updated fiddle. Note that the CSS was also updated to accommodate for the markup changes.

Here's the resulting code:

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');
    }
});

这篇关于带折叠类别的Bootstrap选项卡式导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！