Question

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

截至目前，我的导航功能可以显示和隐藏某些标签页并且所有标签都可以正常工作，但它将可折叠组内的标签视为与其外部标签不同的设置，并且这样，不会正确取消选择标签。我试图用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>

Answer 1

我设法让它工作但它需要在标记和一些自定义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');
    }
});

具有折叠类别的Bootstrap选项卡式导航

1 个答案: