Twitter bootstrap 显示/隐藏twitter引导选项卡

我正在使用引导来显示选项卡下面的内容，但我想在再次单击选项卡时折叠选项卡。以下是我尝试使用但无效的代码：

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

---

我不确定标签是否应该这样工作……我应该试试折叠功能吗

是的，听起来像是你想要的。也就是说，此jQuery将隐藏一个已激活的选项卡：

$('#myTab a').click(function (e) {
    if($(this).parent('li').hasClass('active')){
        $( $(this).attr('href') ).hide();
    }
});​

问题是，这会阻止隐藏的选项卡再次显示，因此我认为您不想使用它。看

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

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

---

有关此解决方案，请参阅。

我有一个适用于本例的版本，仅针对主选项卡，您必须修改它以处理下拉选项卡。我刚刚把它扔进了上面Jeromy的叉子里：

代码如下：

 $(document).off('click.tab.data-api');
    $(document).on('click.tab.data-api', '[data-toggle="tab"]', function (e) {
        e.preventDefault();
        var tab = $($(this).attr('href'));
        var activate = !tab.hasClass('active');
        $('div.tab-content>div.tab-pane.active').removeClass('active');
        $('ul.nav.nav-tabs>li.active').removeClass('active');
        if (activate) {
            $(this).tab('show')
        }
    });

---

以下是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);
    }
});

---

我得到了一个工作的引导程序，它支持使用以下代码打开/关闭Togle：

jQuery(function() {
// Closing active pill when clicking on toggle:
jQuery(document).off('click.bs.tab.data-api');
jQuery(document).on('click.bs.tab.data-api', '[data-toggle="pill"]', function(e) {
    e.preventDefault();
    var activeClass = 'active';
    var tab = jQuery(this).attr('href');
    var tab = tab && tab.replace(/.*(?=#[^\s]*$)/, ''); // strip for ie7
    var tab = jQuery(tab);
    if (!tab.hasClass(activeClass)) {
        jQuery(this).tab('show');
    } else {
        jQuery(this).parent().removeClass(activeClass);
        tab.parent().children().removeClass(activeClass);
    }
});

---

})

遇到了同样的问题，通过修改bootstrap.js解决了这个问题

在tab.prototype.show函数中查找选项卡类定义（通常为第1783行），然后修改：

如果$this.parent'li'.hasClass'active'返回

到

然后，它将按预期工作，而无需在项目中创建更多自定义脚本

编辑：

此修改会影响项目中的每个选项卡面板，但是，如果希望仅对所需对象产生此效果，则需要添加一些数据隐藏或类似内容，例如：

if ($this.parent('li').hasClass('active')) {
            if ($this.parent('li').attr('data-hide') == "on") {
                $this.parent('li').removeClass('active')
                $(selector).removeClass('active')
            }
            return
        }

---

然后，当单击时，每个具有数据隐藏的父级都将隐藏。

如何执行类似操作？show.bs.tab将始终在单击之前启动，并将显示单击正确的状态

$(document).on('show.bs.tab', '#myTab a', function(e) {
   if (!$(e.target).hasClass('active')) {
      $(e.target).addClass('monkeyPatch');
   }
});

$(document).on('click', '#myTab a', function(e) {
   var tab = $(this);
   if (tab.hasClass('monkeyPatch')) {
      tab.removeClass('monkeyPatch');
   } else {
      $('.tab-pane').removeClass('active');
      tab.parent('li').removeClass('active');
   }
});

---

哦，如果你想让它可重复使用，你应该选择$'.nav a'，而不是$'myTab a'…谢谢，我实际上把它切换到了常规的jquery slideToggle，并取得了一些成功。我试过这个，但如果你想重新启用这个选项卡，它就不起作用了。@JoãoMosmann:如果你想恢复原始海报没有要求的功能，尝试$'myTab a'。单击函数e{if$this.parent'li'。hasClass'active'{var target_pane=$this.attr'href'；$target_pane.toggle！$target_pane.is:visible；}；请参阅Downwoted，因为解决方案不完整，即当一个选项卡被隐藏时，即使从另一个工作的选项卡切换后，它仍保持隐藏状态，顺便说一句。不需要超时值，因为在运行当前堆栈的消息队列后，即使忽略了它，函数也将被执行，并添加}else{tab.tab'show'；}要使选项卡相互连接，我无法在没有设置超时的情况下使其工作，但是，无论在Safari 7.1.3上测试了什么。你建议的else条款似乎没有什么区别。我在回答中提到的fiddle中的标签已经可以切换了。对不起，我可能只是误解了。我指的是可以忽略的1毫秒的超时值，而不是setTimeout函数本身。我必须补充一点，它不适合下拉列表

$(document).on('show.bs.tab', '#myTab a', function(e) {
   if (!$(e.target).hasClass('active')) {
      $(e.target).addClass('monkeyPatch');
   }
});

$(document).on('click', '#myTab a', function(e) {
   var tab = $(this);
   if (tab.hasClass('monkeyPatch')) {
      tab.removeClass('monkeyPatch');
   } else {
      $('.tab-pane').removeClass('active');
      tab.parent('li').removeClass('active');
   }
});