Bootstrap 4中的标签折叠功能

Question

在我的代码中，我有Bootstrap 4标签。我希望一开始所有的标签内容都是隐藏的，当我点击标签时，标签内容才会显示出来。 为此，我从tab-pane div中删除了active类，因此现在一开始的内容不显示，当我点击标签时，它就会显示，但是当我再次点击该标签时，它不会关闭。 我希望再次点击标签按钮时，标签内容可以再次关闭。

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

只需点击菜单即可显示内容，再次点击菜单即可关闭。帮帮我。

- user8579791

---

你使用的是哪个版本？Beta还是Alpha？ - core114

我正在使用Bootstrap4 alpha版本。 - user8579791

第二次点击应该发生什么？“它不关闭”是什么意思？ - Phani Kumar M

我希望所有内容都被隐藏，当我点击li标签时，它应该打开内容。当我再次点击li时，它应该关闭选项卡内容。对于第1、2、3、4个菜单项也是如此。 - user8579791

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

- Bhuwan

---

非常感谢，我正在寻找那个答案。 - user8579791

很高兴能够帮助 :) - Bhuwan

还有另一个问题，当您点击菜单按钮超过两次时，它将无法工作。 - user8579791

应该是$('.tab-pane[id="'+ href +'"]').toggleClass('active'); - user8579791

请查看更新后的答案。添加以下代码 $(this).removeClass('active')。 - Bhuwan

@Bhuwan，我的页面中这一行 $(this).removeClass('active') 不起作用。如果我将其删除，则在单击活动选项卡时会隐藏内容，但仍然出现之前的错误。有什么想法吗？ - Vpa

Answer 2

现在它正在运行，使用以下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>

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

- core114

---

你复制粘贴了我要求更改的相同代码给我..而且它还不起作用。 - user8579791

@Tanmay 请检查你的 CDN。 - core114

我希望所有的内容都被隐藏起来，当我点击li标签时，它应该打开内容。当我再次点击li标签时，它应该关闭标签内容。对于第一、第二、第三、第四个菜单项也是如此。 - user8579791

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

- Mitesh