页面加载时设置Bootstrap 4 Accordion展开面板头部背景色及样式切换

问题分析 #

你原代码的核心问题：

• 选择器语法错误：$("collapse.show")、$("card-header .btn") 等选择器遗漏了类选择器前缀 .，导致无法匹配目标元素
• 点击事件逻辑错误：会切换所有card-header的highlight类，而非当前点击的面板头部
• 初始化时机偏差：动态生成按钮的代码在$(document).ready外执行，可能导致初始化高亮时元素未完全生成

修正步骤 #

1. 保留现有CSS（无需修改） #

你的highlight类样式逻辑正确：

.accordion .card-header.highlight {
    color: #fff;
    background-color: red;
}

2. 修正JavaScript代码 #

将所有逻辑放入$(document).ready，确保DOM和动态元素生成完成后执行；同时利用Bootstrap折叠事件同步高亮状态，比直接监听点击更可靠：

$(document).ready(function(){
    /** 动态生成Accordion ID **/
    $.each($(".accordion"), (function (index) {
       $(this).attr("id", "accordion_" + parseInt(index + 1));
    }));

    /** 动态生成交互元素 **/
    $.each($(".accordion > .card"), (function (index, value) {
       var num = index + 1;
       var $card = $(value);
       var accordionId = $card.closest(".accordion").attr("id");

       // 设置card-header ID
       $card.children(".card-header").attr("id", "heading_acc_" + num);
       // 包裹按钮并设置属性
       $card.find(".card-header > .card-title").wrapInner("<button class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" aria-expanded=\"false\"></button>");
       $card.find(".card-header button").attr({
          "data-target": "#collapse_acc_" + num,
          "aria-controls": "collapse_acc_" + num,
          "data-parent": "#" + accordionId // 确保同组Accordion互斥展开（可选）
       });
       // 设置collapse面板属性
       $card.children(".collapse").attr({
          id: "collapse_acc_" + num,
          "aria-labelledby": "heading_acc_" + num
       });

       // 初始化高亮：如果面板默认展开，给头部加highlight类
       if ($card.children(".collapse").hasClass("show")) {
           $card.children(".card-header").addClass("highlight");
           $card.find(".card-header button").attr("aria-expanded", "true");
       }
    }));

    // 监听面板展开事件
    $(".collapse").on("show.bs.collapse", function(){
        var $header = $(this).prev(".card-header");
        $header.addClass("highlight");
        // 互斥模式下，移除同组其他面板的高亮
        var accordionId = $(this).closest(".accordion").attr("id");
        $("#" + accordionId + " .card-header").not($header).removeClass("highlight");
    });

    // 监听面板收起事件
    $(".collapse").on("hide.bs.collapse", function(){
        $(this).prev(".card-header").removeClass("highlight");
    });
});

关键改进点 #

• 所有代码放入$(document).ready，确保DOM加载完成后执行，避免元素未生成的问题
• 初始化高亮逻辑嵌入动态生成元素的循环中，直接匹配当前面板，避免选择器错误
• 使用Bootstrap官方折叠事件show.bs.collapse/hide.bs.collapse，精准同步高亮状态
• 可选添加data-parent属性，实现同组Accordion互斥展开，同时自动同步其他面板的高亮状态

效果验证 #

• 页面加载时，带有show类的面板头部自动变为红色
• 点击按钮展开面板时，头部变红；收起时恢复原样式
• 启用互斥模式后，展开新面板时，旧面板头部自动恢复原样式

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