jquery - 带有 jQ​​uery/CSS 的嵌套选项卡菜单

Question

我必须创建一个关于统计的站点，因此我需要一个 4 级嵌套选项卡菜单。 (日期/路线/类别/Disziplins)

在这里，我找到了 2 个级别的内容，但我无法将其更改为更多级别:( 我希望有人会找到解决方案:)

非常感谢!

$("ul.nav-tabs a").click(function (e) {
  e.preventDefault();  
    $(this).tab('show');
});

<div class="tabbable boxed parentTabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#set1">Tab 1</a>
        </li>
        <li><a href="#set2">Tab 2</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade active in" id="set1">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub11">Tab 1.1</a>
                    </li>
                    <li><a href="#sub12">Tab 1.2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="sub11">
                        <p>Tab 1.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub12">
                        <p>Tab 1.2</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="set2">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub21">Tab 2.1</a>
                    </li>
                    <li><a href="#sub22">Tab 2.2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="sub21">
                        <p>Tab 2.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub22">
                        <p>Tab 2.2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我已经为选项卡编写了一些代码，可以进一步编辑以添加更多级别。看看这是否有帮助。

JS:

    $('.tabs a').click(function(){
    var idd = $(this).attr('href');

    if($(idd).hasClass('tabs_content')) //First Level
    {
        $('.tabs_content').hide();
        $(idd).fadeIn();
        $(idd).find('.tabs ul li:first a').click();
        $('.tabs:first ul li a.active').removeClass('active');
        $(this).addClass('active');

    }else if($(idd).hasClass('tab_content_inner')) //Second Level
    {
        $('.tab_content_inner').hide();
        $(idd).fadeIn();
        $(idd).find('.tabs ul li:first a').click();
        $(this).parent().siblings().find('a.active').removeClass('active');
        $(this).addClass('active');

    }else if($(idd).hasClass('tab_content_inner_inner')) //3rd Level
    {
        $('.tab_content_inner_inner').hide();
        $(idd).fadeIn();
        $(this).parent().siblings().find('a.active').removeClass('active');
        $(this).addClass('active');
    }

    return false;
});

这是一个有效的 DEMO

可以做的更合乎逻辑，减少冗余代码。