按钮仅在第二次单击时折叠/展开手风琴 Bootstrap

Question

我有这个按钮，点击时可以折叠/展开页面上的所有手风琴。问题是当我第一次加载页面时，它只会在我点击按钮 second 次后开始折叠/展开所有内容，然后每次点击都有效。 p>

按钮 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");
});    
});