Bootstrap 4折叠面板默认展开时图标状态错误的修复咨询

问题描述 #

使用Bootstrap 4开发页面时，部分折叠面板（Accordion）默认处于展开状态，但指示折叠/展开的图标显示错误。点击图标后状态能正常切换匹配，但需要页面加载时图标就正确反映默认展开状态。

曾尝试在card-title标签添加aria-expanded="true"属性，但无效——因为触发折叠的按钮是动态生成的。

问题根源 #

动态生成折叠按钮时，代码统一给按钮设置了aria-expanded="false"，没有根据对应折叠面板是否默认展开（即是否带有show类）来动态调整这个属性值，导致CSS无法正确判断状态并显示对应图标。

修复方案 #

修改动态生成按钮的JS代码，在创建按钮后，检查当前卡片对应的折叠面板是否包含show类，若包含则将按钮的aria-expanded设为true。

修改后的JavaScript代码 #

/** Accordions - dynamically add id **/
$.each($(".accordion"), (function(index) {
  $(this).attr("id", "accordion_" + parseInt(index + 1));
}));

/** Accordions - dynamically add interaction **/
$.each($(".accordion > .card"), (function(index, value) {
  var num = index + 1;
  $(value).children(".card-header").attr("id", "heading_acc_" + num);
  // 包裹按钮并初始设置aria-expanded
  $(value).find(".card-header > .card-title").wrapInner("<button  class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" aria-expanded=\"false\"></button>");
  var collapseEl = $(value).children(".collapse");
  var toggleBtn = $(value).find(".card-header > .card-title > button");
  
  toggleBtn.attr({
    "data-target": "#collapse_acc_" + num,
    "aria-controls": "collapse_acc_" + num
  });
  
  collapseEl.attr({
    id: "collapse_acc_" + num,
    "aria-labelledby": "heading_acc_" + num
  });
  
  // 关键：根据折叠面板的show类设置按钮的aria-expanded
  if (collapseEl.hasClass("show")) {
    toggleBtn.attr("aria-expanded", "true");
  }
}));

原理说明 #

• 遍历每个卡片时，获取对应的折叠面板元素collapseEl和触发按钮toggleBtn
• 判断collapseEl是否带有show类（默认展开的标识）
• 如果是默认展开状态，将按钮的aria-expanded设为true，这样CSS就能根据这个属性正确显示向下的图标（\f107）

原CSS和HTML代码无需修改，保持原样即可。

内容的提问来源于stack exchange，提问作者Ambulon