显示/隐藏 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

我有一个可以工作的版本（在我的情况下，仅适用于主选项卡，您必须对其进行修改以处理下拉选项卡。）我只是将它放入上面 Jeromy 的 jsfiddle 的一个分支中：@987654321 @

代码如下：

 $(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')
        }
    });

Answer 3

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

在Tab.prototype.show函数上找到tab类定义（通常是1783行）并修改：

if ($this.parent('li').hasClass('active')) return

到

if ($this.parent('li').hasClass('active')) {
            $this.parent('li').removeClass('active')
            $(selector).removeClass('active')
            return
        }

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

编辑：

此修改会影响项目中的每个选项卡面板，但是，如果您只想对所需对象进行此效果，则需要添加一些 data-hide 或类似的东西，例如：

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

那么，每个父 <li> 和 data-hide 都会在点击时隐藏。

Answer 4

我得到了一个有效的引导药丸导航，它支持使用以下代码打开/关闭工具：

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);
    }
});

});

Answer 5

这样的事情怎么办？ show.bs.tab 将始终在 click 之前触发，它会给 click 正确的状态

$(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');
   }
});

Answer 6

是的，听起来你想要Bootstrap's collapse widget。也就是说，这个 jQuery 将隐藏一个已经处于活动状态的选项卡：

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

问题是这会阻止隐藏的标签再次显示，所以我认为您不会想要使用它。见http://jsfiddle.net/jhfrench/NQ97h/

如果您希望能够恢复标签页，请尝试：

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

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