多个自举手风琴在单击一个手风琴时崩溃，其他折叠

Question

我尝试了以下代码，除了FontAwesome图标之外，一切都很好。 我试图在Google上找到一些解决方案，但找不到所需的解决方案。

当我单击一个手风琴时，另一个手风琴应该被折叠，而当前单击的手风琴应该被打开，同时应根据手风琴的位置更改fa图标。

以下是我迄今为止尝试过的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> 

Answer 1

首先，您没有在代码中链接bootstrap.min.js文件。 如果要使用bootstrap，则需要包括bootstrap.min.css文件以及bootstrap.min.js文件，以便为您完成所有工作。

您需要以下代码才能根据需要工作。 通过使用not(this) ，它将为您提供除当前单击的项目以外的所有元素。 这样您就可以在所有其他元素上重置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');

    }
});

这是正在工作的JSFiddle。

---

以下是您的问题的嵌入式代码段。

 $(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>