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.js来解决。

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

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

到

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

然后它将按预期工作，而不会创建更多＆＃34;自定义脚本＆＃34;在你的项目中。

编辑：

此修改会影响项目中的每个标签面板，但是，如果您只想对所需的对象产生此效果，则需要添加一些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 3

我有一个可行的版本（在我的情况下，只是为了主要标签，你必须修改它来处理下拉标签。）我只是把它扔进了上面的Jeromy的jsfiddle的叉子：{{ 3}}

以下是代码：

 $(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 4

我得到了一个工作的bootstrap药丸导航，支持使用以下代码打开/关闭toogle：

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

显示/隐藏Twitter引导选项卡

6 个答案: