显示/隐藏Twitter引导选项卡

Question

我正在使用引导程序在选项卡下方显示内容,但我想在再次单击选项卡时折叠选项卡.这是我试图开始工作的代码,但无济于事:

    <ul id="myTab" class="nav nav-tabs">
        <li class="square"><a class="story" href="#article1" data-toggle="tab"><img src="#"/></a></li>
        <li class="square"><a class="story" href="#article2" data-toggle="tab"><img src="#g"/></a></li>
        <li class="square"><a class="story" href="#article3" data-toggle="tab"><img src="#"/></a></li>
               <div id="article1" class="tab-pane fade"><p>Lorem ipsum...</p></div>
               <div id="article2" class="tab-pane fade"><p>Lorem ipsum dolor sit amet....</p</div>
               <div id="article3" class="tab-pane fade"><p>Lorem ipsum dolor sit amet...</p></div>
    </ul>

<script>
$('#myTab a').click(function (e) {
            if($(this).tab.hasClass('active')){
                    $(this).tab('hide');
                } else {
                        e.preventDefault();
                        $(this).tab('show');
                    }
                })
</script>

我不确定标签是否应该以这种方式工作......我应该尝试折叠功能吗？

Answer 1

以下是Jeromy解决方案的调整,我认为它可以满足您的需求:

$('#myTab a').click(function (e) {
    var tab = $(this);
    if(tab.parent('li').hasClass('active')){
        window.setTimeout(function(){
            $(".tab-pane").removeClass('active');
            tab.parent('li').removeClass('active');
        },1);
    }
});

http://jsfiddle.net/NQ97h/39/

Answer 2

是的，听起来您想要Bootstrap 的折叠小部件。也就是说，这个 jQuery 将隐藏一个已经活动的选项卡：

\n\n

$(\'#myTab a\').click(function (e) {\n    if($(this).parent(\'li\').hasClass(\'active\')){\n        $( $(this).attr(\'href\') ).hide();\n    }\n});\xe2\x80\x8b\n

\n\n

问题是，这会阻止隐藏的选项卡再次显示，所以我认为您不会想使用它。请参阅http://jsfiddle.net/jhfrench/NQ97h/

\n\n

如果您希望能够恢复该选项卡，请尝试：

\n\n

$(\'#myTab a\').click(function (e) {\n    if($(this).parent(\'li\').hasClass(\'active\')){\n        var target_pane=$(this).attr(\'href\');\n        $( target_pane ).toggle( !$( target_pane ).is(":visible") );\n    }\n});\n

\n\n

请参阅http://jsfiddle.net/epT3L/了解此解决方案。

\n