[英]Multiple bootstrap accordions with collapse other when clicked on one accordion
I tried the following code and everything is fine except the FontAwesome
icons. 我尝试了以下代码,除了
FontAwesome
图标之外,一切都很好。 I tried to find some solution on Google, but I couldn't find the solution that I'm looking for. 我试图在Google上找到一些解决方案,但找不到所需的解决方案。
When I click on one of the accordion the other accordion should be collapsed and the current clicked accordion should be open, and at the same time the fa icon should be changed depending on the accordion position. 当我单击一个手风琴时,另一个手风琴应该被折叠,而当前单击的手风琴应该被打开,同时应根据手风琴的位置更改fa图标。
Here is what I have tried so far JSFiddle 以下是我迄今为止尝试过的jsfiddle
$(document).ready(function () { $(".accordion-body").on("shown", function (evt) { setIcon(evt.target, true); }); $(".accordion-body").on("hidden", function (evt) { setIcon(evt.target, false); }); $(".accordion-body").collapse("hide"); $("#collapse-faq-1").collapse("show"); }); $('.accordion-toggle').click(function(event) { var id = '#'+ event.currentTarget.firstElementChild.id; if('class == fa-chevron-down'){ $(id).removeClass('fa-chevron-down'); $(id).addClass('fa-close'); }else{ $(id).removeClass('fa-close'); $(id).addClass('fa-chevron-down'); } }); $(function () { var active = true; $('#collapse-init').click(function () { if (active) { active = false; $('.panel-collapse').collapse('show'); $('.panel-title').attr('data-toggle', ''); $(this).text('Enable accordion behavior'); } else { active = true; $('.panel-collapse').collapse('hide'); $('.panel-title').attr('data-toggle', 'collapse'); $(this).text('Disable accordion behavior'); } }); $('#accordion').on('show.bs.collapse', function () { if (active) $('#accordion .in').collapse('hide'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="accordion" id="accordion"> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1"> <i id="indicator-1" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-1" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2"> <i id="indicator-2" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-2" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-3"> <i id="indicator-3" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-3" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-4"> <i id="indicator-4" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-4" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-5"> <i id="indicator-5" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-5" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-6"> <i id="indicator-6" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-6" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading WhiteBg" id="heads"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-7"> <i id="indicator-7" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-7" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading WhiteBg"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-8"> <i id="indicator-8" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-8" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> </div>
First of all you didn't link the bootstrap.min.js
file in your code. 首先,您没有在代码中链接
bootstrap.min.js
文件。 If you want to use bootstrap then you need to include its bootstrap.min.css
file along with its bootstrap.min.js
file to do all the stuff for you. 如果要使用bootstrap,则需要包括
bootstrap.min.css
文件以及bootstrap.min.js
文件,以便为您完成所有工作。
You need the following code to work as per on your requirement. 您需要以下代码才能根据需要工作。 By using
not(this)
it will gives you all the elements except the current clicked item. 通过使用
not(this)
,它将为您提供除当前单击的项目以外的所有元素。 So that you can reset Fa Icons on all the other elements and apply specific Icon on your this element. 这样您就可以在所有其他元素上重置Fa图标,并在此元素上应用特定的Icon。
$('.accordion-toggle').click(function (event) {
var $this = $(this);
// It will reset all the other icons except the clicked item icon
$('.accordion-toggle').not(this).children('i').removeClass('fa-close').addClass('fa-chevron-down');
if ($this.children('i').hasClass('fa-chevron-down')) {
$this.children('i').removeClass('fa-chevron-down').addClass('fa-close');
} else {
$this.children('i').removeClass('fa-close').addClass('fa-chevron-down');
}
});
Here is working JSFiddle. 这是正在工作的JSFiddle。
Below is the embedded snippet for your question. 以下是您的问题的嵌入式代码段。
$(function () { $(document).ready(function () { $(".accordion-body").on("shown", function (evt) { setIcon(evt.target, true); }); $(".accordion-body").on("hidden", function (evt) { setIcon(evt.target, false); }); $(".accordion-body").collapse("hide"); $("#collapse-faq-1").collapse("show"); }); $('.accordion-toggle').click(function (event) { var $this = $(this); // It will reset all the icons except the clicked (this) item. $('.accordion-toggle').not(this).children('i').removeClass('fa-close').addClass('fa-chevron-down'); if ($this.children('i').hasClass('fa-chevron-down')) { $this.children('i').removeClass('fa-chevron-down').addClass('fa-close'); } else { $this.children('i').removeClass('fa-close').addClass('fa-chevron-down'); } }); $(function () { var active = true; $('#collapse-init').click(function () { if (active) { active = false; $('.panel-collapse').collapse('show'); $('.panel-title').attr('data-toggle', ''); $(this).text('Enable accordion behavior'); } else { active = true; $('.panel-collapse').collapse('hide'); $('.panel-title').attr('data-toggle', 'collapse'); $(this).text('Disable accordion behavior'); } }); $('#accordion').on('show.bs.collapse', function () { if (active) $('#accordion .in').collapse('hide'); }); }); });
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div class="accordion" id="accordion"> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1"> <i id="indicator-1" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-1" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2"> <i id="indicator-2" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-2" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-3"> <i id="indicator-3" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-3" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-4"> <i id="indicator-4" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-4" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-5"> <i id="indicator-5" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-5" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-6"> <i id="indicator-6" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-6" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading WhiteBg" id="heads"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-7"> <i id="indicator-7" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-7" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading WhiteBg"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-8"> <i id="indicator-8" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-8" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.