0

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

到目前为止，我的导航功能能够显示和隐藏某些选项卡并且所有选项卡都可以工作，但是它将可折叠组内部的选项卡视为与其外部的选项卡不同的集合，因此，确实没有正确取消选择标签。我试图用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>

4

1 回答 1

1

我设法让它工作，但它需要对标记进行一些细微的更改以及一些自定义 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>

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-24T05:57:48.070 回答