[英]Bootstrap accordion - Dont close other accordion unless user click to close
在引導手風琴示例下面使用。 手風琴的功能工作正常。
當用戶展開第一個手風琴並單擊第二個手風琴時。 第一手風琴不應該關閉。 但是,當用戶單擊第二個手風琴時,它會關閉第一個手風琴。
手風琴的展開/折疊必須手動打開/關閉。
不確定是否需要更新 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>
為了防止在單擊第二個手風琴時關閉第一個手風琴,您只需刪除代碼片段的 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.