在下面的引导手风琴示例中使用。手风琴的功能正常。
当用户展开第一手风琴并单击第二手风琴时。第一手风琴不应关闭。但是,当用户单击第二个手风琴时,它将关闭第一个手风琴。
手风琴的展开/折叠必须手动打开/关闭。
不确定是否需要更新JS或CSS来解决此问题。请指导我找到解决方法。
谢谢
$('.collapse.show').each(function(){
$(this).prev('.card-header').find('.fa').addClass('fa-minus').removeClass('fa-plus');
});
// Toggle plus minus icon on show hide of collapse element
$('.collapse').on('show.bs.collapse', function(){
$(this).prev('.card-header').find('.fa').removeClass('fa-plus').addClass('fa-minus');
}).on('hide.bs.collapse', function(){
$(this).prev('.card-header').find('.fa').removeClass('fa-minus').addClass('fa-plus');
});
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button></h2>
</div>
<div class="collapse" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button></h2>
</div>
<div class="collapse" id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
为了防止在单击第二个手风琴时关闭它们,您只需删除代码段HTML部分中的data-parent
属性。
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button></h2>
</div>
<div class="collapse" id="collapseOne" aria-labelledby="headingOne">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button></h2>
</div>
<div class="collapse" id="collapseTwo" aria-labelledby="headingTwo">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>