关闭 Bootstrap 4 选项卡窗格答案

【问题标题】：Close Bootstrap 4 tab pane关闭 Bootstrap 4 选项卡窗格
【发布时间】：2017-01-11 17:47:25
【问题描述】：

单击选项卡链接后，我正在尝试打开/关闭 Bootstrap 4 选项卡窗格。基本上为每个选项卡窗格创建一个切换效果。最终产品是一个垂直侧边栏导航，您可以在其中打开/关闭每个选项卡窗格。

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>


$(".nav-link.active").click(function(){
    $(this).find('.tab-pane').removeClass('active');
});

示例：http://codepen.io/anycircle/pen/dNMPrW

【问题讨论】：

你的代码看起来就像来自 Bootstrap 文档的代码，而 jQuery 并没有真正完成任何事情。
您是否要在第二次单击标题后隐藏选项卡？根据您的 jquery，当导航项在已经处于活动状态时单击时，您似乎想要删除活动类。对吗？
是的，HTML 直接来自文档，因为我的标记完全相同（加上一些仅用于样式目的的自定义类）。

标签： jquery twitter-bootstrap tabs bootstrap-4

【解决方案1】：

如果您在第二次单击导航后尝试隐藏活动的.tab-pane 数据，您可以将您的 jQuery 更新为如下内容：

$(".nav-link").click(function(){
    if ($(this).hasClass('active')){
        $('#' + this.hash.substr(1).toLowerCase()).toggleClass('active');
    }
});

这是一个代码笔： http://codepen.io/egerrard/pen/dNMyry

【讨论】：

谢谢，这有效，除非您关闭一个窗格后，您应该能够将同一窗格重新打开。
@user3063628 更新了答案和 codepen 以使用 .toggleClass() 这应该可以解决您的问题。
仍然不适合我。我创建了一支笔来显示我的标记。 codepen.io/anycircle/pen/dNMPrW
@user3063628 它正在获取导航的文本值，就像您的问题正在使用一样。在您刚刚发送的代码笔示例中，您没有使用文本，而是使用了图像，因此该方法不起作用。我将方法更新为基于 href 的哈希值而不是文本。无论如何，从长远来看应该更可靠。查看更新后的this.hash.substr(1) 代码的答案和代码笔。
这行得通！谢谢。既然窗格已删除活动类，我将如何删除选项卡本身的活动类？

【解决方案2】：

  <ul  class="nav nav-tabs  ">
      <li class=" nav-item "> <a class="nav-link active" href="#One" data-target="#One" data-toggle="tab"> One </a>  </li>
      <li class="nav-item"><a  class="nav-link" href="#Two" data-target="#Two" data-toggle="tab"> Two </a> <li>  
    </ul> 
  <div class="tab-content clearfix">
    <div class="tab-pane fade in active" id="One">
    This is one 
    </div>
    <div class="tab-pane fade  " id="Two">
    This is Two 
    </div>
  </div>

【讨论】：

请附上一些描述你的代码的文字，方便OP和社区理解。