Javascript 带折叠类别的引导选项卡导航

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

到目前为止，nav可以显示和隐藏某些选项卡，所有选项卡都可以工作，但它将可折叠组内部的选项卡视为与外部选项卡不同的一组，因此不能正确取消选择选项卡。我试图用javascript解决这个问题，但我还没有找到解决的办法。对此的任何见解都将不胜感激

链接到上的代码

内容1a
内容1b
内容1c
内容2
内容3
内容4

---

我成功地实现了这一点，但它需要对标记进行一些细微的更改，再加上一些自定义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="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>

---

你为什么使用过时的引导版本？我建议您至少升级到2.3.2，从2.3.1升级到2.3.2不会改变我注意到的任何内容。更新到3.0.0会使整个页面上的所有内容都爆炸式增长，所以我可能会明白这一点。无论如何，我的问题所涉及的问题都是一样的。是的，我真的不认为它能解决这个问题，我只是想知道你是否需要使用版本2.2.1，是的，版本3的更新需要一些重构，因为一些类名发生了变化，这绝对不是一个快速升级。。。不管怎样，我想我已经在v2中运行了，你可以检查下面的答案

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

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