我创建了引导程序选项卡，并向这些选项卡添加了折叠功能。 期待以下功能，
1。每当我单击选项卡时，都应打开内容。 2.当我单击相同的选项卡内容时，如果该选项卡内容处于打开状态，则应将其隐藏，否则无需隐藏。
借助折叠选项，我可以切换内容框，但无法获得相同的功能。某些选项卡的行为不正常。
反正有没有通过添加和删除类来解决此问题的方法？
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li data-toggle="collapse" href="#collapseExample" ng-click="clickEvent($event)"><a data-toggle="tab" href="#home">Home</a></li>
<li data-toggle="collapse" href="#collapseExample1"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li data-toggle="collapse" href="#collapseExample2"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li data-toggle="collapse" href="#collapseExample3"><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade">
<p class="collapse" id="collapseExample" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<p class="collapse" id="collapseExample1">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<p class="collapse" id="collapseExample2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<p class="collapse" id="collapseExample3">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
有人可以帮我解决这个问题吗？我要求所有人查看我的代码并检查选项卡的行为。
谢谢！
答案 0 :(得分：0)
我已经在here之前提供了此解决方案。您可以使用手风琴来做到这一点。这可以按照您的要求
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="accordion container-fluid" id="expandInfo">
<section id="yello" class="py-5">
<div class="container">
<div class="row ">
<!--start featured video -->
<div class="col-4 text-center">
<span class="fa-stack fa-2x" style="font-size: 45px;">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-file-video fa-stack-1x aria-hidden=" true></i>
</span>
<button type="button" class="btn" data-toggle="collapse" data-target="#viewVideo">SEE VIDEO</button>
</div>
<!--end featured video -->
<!-- start train -->
<div class="col-4 text-center">
<span class="fa-stack fa-2x" style="font-size: 45px;">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa far fa-handshake fa-stack-1x aria-hidden=" true""></i>
</span>
<button type="button" class="btn" data-toggle="collapse" data-target="#whyUs">WHY US?</button>
</div>
<!--end train-->
<!--start instruct -->
<div class="col-4 text-center yellopos">
<span class="fa-stack fa-2x" style="font-size: 45px;">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fas fa-users fa-stack-1x aria-hidden=" true""></i>
</span>
<button type="button" class="btn" data-toggle="collapse" data-target="#yourInstructor">MEET US</button>
</div>
<!--end instruct-->
</div>
</div>
</section>
<!-- Collapsible Element HTML -->
<!--start viewVideo area -->
<div id="viewVideo" class="collapse row mt-3 panel-collapse" data-parent="#expandInfo">
<!--start single news item -->
<div class="col-md-7">
<div class="embed-responsive embed-responsive-4by3" style="width: 70%; margin: auto;">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>
</div>
</div>
<div class="col-md-5">
<h4>Women's Self-Defense Course</h4>
<p>This is a video of a Women's Self-Defense Class given at Sam Houston State University. While watching a video isn't as good as attending a course, there is still a lot that can be learned from watching this online course. If you practice the
skills presented in the video you can improve your chances of surviving an attack.</p>
<p>Click the play button to see a short clip of the class.</p>
<div style="text-align:center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="9NMATMUT2634Q" />
<input class="btn btn-outline-primary btn-lg" type="submit" value="Buy Now - $20">
</form>
</div>
</div>
</div>
<!--end viewVideo area -->
<!--start whyUs area -->
<div id="whyUs" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
<!--start single news item -->
<div class="col-md-5">
<div class="embed-responsive">
<img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="Why join Mousel's Mixed Martial Arts Academy" class="img-fluid img-thumbnail rounded mx-auto d-block">
</div>
</div>
<div class="col-md-7">
<h4>Why you sould choose us...</h4>
<p>Sharing knowledge and helping others reach their full potential is what we do best.
</p>
<p>
The martial arts were originally aimed towards life preservation and self defense, but today people come to us from all walks of life, each with their own set of reasons for wanting to train at Mousel’s Mixed Martial Arts Academy. Some want to learn self
defense, others want to fight competitively, some seek to become physically fit and others just want to have fun. Whatever the reason you chose, you will find others just like yourself studying at Mousel’s Mixed Martial Arts Academy.
</p>
</div>
</div>
<!--end viewVideo area -->
<!--start yourInstructor area -->
<div id="yourInstructor" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
<!--start single news item -->
<div class="col-md-4">
<div class="embed-responsive">
<img src="../images/tim-mousel-profile.jpg" width="250" height="376" class="img-fluid img-thumbnail rounded mx-auto d-block">
</div>
</div>
<div class="col-md-8">
<h4>Tim Mousel</h4>
<p>Tim Mousel is the owner of <a href="http://www.defend.net/">Mousel's Mixed Martial Arts
Academy</a>, <a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and <a href="https://www.edge-trainer.com/">The Edge Personal Training</a>.</p>
<p>Tim has trained many of Houston's top martial arts instructors and has students he has trained compete at the highest levels of mixed martial arts competition including the <strong>Ultimate Fighting Championship</strong> (UFC), <strong>King of the Cage</strong>,
<strong>Pride</strong>, national kickboxing and Thai boxing championships, amateur and professional boxing. Tim was also the Strength and Conditioning Coach for two-time world boxing champion <a href="http://www.reggiesweetjohnson.com/"
target="_blank">Reggie Johnson</a>.
</p>
</div>
</div>
<!--end yourInstructor area -->
</div>
<!-- end expandInfo -->
</div>
</body>
</html>