单击活动选项卡时关闭活动选项卡内容 - twitter bootstrap答案

【问题标题】：Close active tab-content when click on active tab - twitter bootstrap单击活动选项卡时关闭活动选项卡内容 - twitter bootstrap
【发布时间】：2013-05-14 17:23:35
【问题描述】：

我正在使用 twitter 引导程序，我希望在单击活动选项卡时关闭活动选项卡内容。

我使用此代码，但这不起作用：

$('#myTab a').click(function (e) {
    if ($(this).parent('li').hasClass('active')) {
        $($(this).attr('href')).removeClass('active');
        $(this).parent('li').removeClass('active');
    } else {
        e.preventDefault();
        $(this).tab('show');
    }
});

【问题讨论】：

这对我来说没有意义.. 你能发布 HTML 吗？

标签： twitter-bootstrap tabs

【解决方案1】：

这是有效的，但并不完美。我编辑 bootstrap.js 并替换它

  $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    e.preventDefault()
    $(this).tab('show')
  })

有了这个

      $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
  e.preventDefault();
      if($(this).parent('li').hasClass('active')){

       $( $(this).attr('href') ).removeClass('active'); 
        $(this).parent('li').removeClass('active');
       if ( $(this).parent('.dropdown-menu') ) {
              $(this).closest('li.dropdown').removeClass('active')
            }
        }
        else {
            e.preventDefault();
            $(this).tab('show');
        }
      })

但我也希望如果下拉选项卡的子菜单处于活动状态，当我单击该下拉选项卡时，应从该下拉选项卡中删除“活动”类，这就是子菜单选项卡内容。

抱歉英语不好。

【讨论】：

【解决方案2】：

这对我有用。删除“活动”类会更好

$('#myTab a').click(function (e) {
  if($(this).parent('li').hasClass('active')){
    $(this).removeClass('active')
    $( $(this).attr('href') ).removeClass('active');
  }
  else {
    e.preventDefault();
    $(this).tab('show');
  }
});

你可以在这里查看http://jsfiddle.net/tekbreak/NQ97h/182/

但是如果您需要它出现在每个选项卡选择器上，请使用这个 jQuery 选择器

$('a[data-toggle="tab"]').click(...

【讨论】：