![](/img/trans.png)
[英]How to collapse/expand an accordion with bootstrap progressively without close the others?
[英]Expand and close accordion bootstrap
您好,我在手风琴方面遇到了麻烦,这是我的代码,请照亮我!
<div id="tg-accordion" class="tg-accordion">
<div class="tg-panel">
<h4 class="active">Why is accreditation important</h4>
<div class="tg-panelcontent" style="display: block;">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>
<div class="tg-panel">
<h4 style="margin-bottom: 10px!important;">European Regulation 765/ 2008</h4>
<div class="tg-panelcontent" style="display: none;">
<div class="tg-jobdescription">
<div class="tg-description" style="margin-bottom: 10px!important;">
<p>description</p>
</div>
</div>
</div>
<div class="tg-panel">
<h4>Recognition of certifications. How accreditation provides recognition</h4>
<div class="tg-panelcontent" style="display: none;">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>
这是html,当我第二次单击以关闭该Accordeon选项卡并且打开它以在tg-panel背景上显示为蓝色时,我想要一些jquery。 这是我的Jquery:
$(function() {
$('.tg-panelcontent').hide();
// $('#tg-accordion h4:first').addClass('active').next().slideDown('slow');
$('#tg-accordion h4').click(function() {
if($(this).next().is(':hidden')) {
$('#tg-accordion h4').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
如果您已经包含了Bootstrap的脚本,则不需要其他脚本即可执行所需的行为。 查看此示例,该示例可在Bootstrap的官方页面上找到 。
这样, <a>
或<button>
标记处的data-toggle
属性指示该元素是“折叠切换器”,并且href / data-target指向元素ID,该元素ID是要折叠/展开的容器。 简单:)
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
你什么都不需要 仅确保指向CSS的链接位于页面的顶部,并且脚本和页面的末尾。 它应该工作正常。
<!-- CSS needed at the beginning of the page --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Why is accreditation important </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> description </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> European Regulation 765/ 2008 </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> description </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Recognition of certifications. How accreditation provides recognition </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> description </div> </div> </div> </div> <!-- Scripts needed at the end of the page --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
您可以简单地在标头上添加data-toggle="collapse"
以及data-target="#idOfYourElement"
来触发折叠。 并将display:none
替换为目标元素上的collapse
类:
工作实例:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div id="tg-accordion" class="tg-accordion"> <div class="tg-panel"> <h4 class="active" data-toggle="collapse" data-target="#targetOne">Why is accreditation important</h4> <div class="tg-panelcontent collapse" id="targetOne"> <div class="tg-jobdescription"> <div class="tg-description"> <p>description</p> </div> </div> </div> </div> <div class="tg-panel"> <h4 data-toggle="collapse" data-target="#targetTwo" style="margin-bottom: 10px!important;" >European Regulation 765/ 2008</h4> <div class="tg-panelcontent collapse" id="targetTwo"> <div class="tg-jobdescription"> <div class="tg-description" style="margin-bottom: 10px!important;"> <p>description</p> </div> </div> </div> <div class="tg-panel"> <h4 data-toggle="collapse" data-target="#targetThree">Recognition of certifications. How accreditation provides recognition</h4> <div class="tg-panelcontent collapse" id="targetThree"> <div class="tg-jobdescription"> <div class="tg-description"> <p>description</p> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.