7

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

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

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

4

6 回答 6

20

这是杰罗米解决方案的一个调整，我相信它可以满足您的需求：

$('#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/

于 2013-08-21T20:52:48.057 回答
1

我有一个可以工作的版本（在我的情况下，仅用于主选项卡，您必须对其进行修改以处理下拉选项卡。）我只是将它扔到上面 Jeromy 的 jsfiddle 的一个分支中：http://jsfiddle .net/HsqQQ/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')
        }
    });
于 2013-06-07T13:38:32.563 回答
1

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

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

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隐藏。

于 2016-04-20T14:12:45.837 回答
0

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

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

});

于 2016-03-10T19:49:31.393 回答
0

做这样的事情怎么办？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');
   }
});
于 2017-07-21T08:07:42.980 回答
-4

是的，听起来你想要Bootstrap 的折叠小部件。也就是说，这个 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/。

于 2013-01-02T21:43:40.343 回答