引导程序 4 中的选项卡折叠答案

【问题标题】：Tab collapse in bootstrap 4引导程序 4 中的选项卡折叠
【发布时间】：2017-10-10 18:31:52
【问题描述】：

在我的代码中，我有 bootstrap 4 Tab 。我首先希望当我单击标签 li 时所有标签内容都将隐藏，然后将显示标签内容。为此，我已经从选项卡窗格 div 中删除了活动类，所以现在首先没有显示内容，当我单击选项卡 li 时它正在显示，但是在我再次单击该 li 后它不会关闭。

我希望当我再次单击选项卡 li 按钮时，选项卡内容应该再次关闭。

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" 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" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>

只希望在单击菜单时它会显示内容，当再次单击菜单时它应该关闭。

帮帮我

【问题讨论】：

使用什么版本？ Beta 版或 Alpha 版
我正在使用 bootstrap4 alpha
第二次点击会发生什么？ it does not closing 是什么意思？
我希望所有内容都被隐藏，当我单击 li 标签时，它应该打开内容。当我再次单击 li 时，它应该关闭标签内容。同样适用于第 1、2、3、第四个菜单项..

标签： javascript jquery html bootstrap-4

【解决方案1】：

更新

添加此额外代码以在再次单击时删除活动类。

$(document).on('click','.nav-link.active', function(){
  var href = $(this).attr('href').substring(1);
  $(this).removeClass('active');
  $('.tab-pane[id="'+ href +'"]').removeClass('active');
})

$(document).on('click','.nav-link.active', function(){
  var href = $(this).attr('href').substring(1);
  //alert(href);
  $(this).removeClass('active');
  $('.tab-pane[id="'+ href +'"]').removeClass('active');
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>






<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" 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" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>

【讨论】：

非常感谢我一直在寻找答案
乐于助人:)
还有一个问题。当您单击菜单按钮超过 2 次时它不起作用
应该是 $('.tab-pane[id="'+ href +'"]').toggleClass('active');
查看更新后的答案。添加这一行$(this).removeClass('active')

【解决方案2】：

现在它的工作使用以下 引导 CDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>






<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" 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" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>

【讨论】：

您将我要求更改的相同代码粘贴给我..而且它也不起作用
@Tanmay 请检查您的CDN
我希望全部隐藏，当我单击 li 标签时，它应该打开内容。当我再次单击 li 时，它应该关闭标签内容。同样适用于第 1、2、3、第 4 个菜单项。

【解决方案3】：

将以下 Bootstrap CDN 添加到您的代码中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

【讨论】：