按鈕僅在第二次單擊時折疊/展開手風琴 Bootstrap

Question

我有這個按鈕，點擊時可以折疊/展開頁面上的所有手風琴。 問題是當我第一次加載頁面時，它只會在我第二次單擊按鈕后開始折疊/展開所有內容，然后每次單擊都有效。

按鈕 HTML：

<Button id="collapseAll" class="btn btn-secondary">Collapse/Expand</Button>

按鈕 JS：

$("#collapseAll").click( function() {
        if(!$('.accordion-header').hasClass("active")){
            $('.accordion-header').removeClass("active").addClass("active");

        } else {
            $('.accordion-header').addClass("active").removeClass("active");
        }
    });

Answer 1

$( document ).ready(function() {
    $("#collapseAll").click( function() {
            if(!$('.accordion-header').hasClass("active")){
                $('.accordion-header').removeClass("active").addClass("active");

            } else {
                $('.accordion-header').addClass("active").removeClass("active");
            }
        });

});

Answer 2

我認為問題出在您的 css 代碼上。

您可以添加以下 css ，它應該可以正常工作..

.accordion-header{
      display:none;
}

.accordion-header.active{
     display:block;
}

Answer 3

驗證它是否符合您的要求。 您也可以參考鏈接http://accordion-cd.blogspot.com/

$(document).ready(function () {
    $("#accordion").accordion({
      collapsible:true,
  });
var icons = $( "#accordion" ).accordion( "option", "icons" );
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
    'aria-selected': 'true',
        'tabindex': '0'
      });
$(this).attr("disabled","disabled");
$('.close').removeAttr("disabled");
});    
});