点击手风琴div切换背景图 重复点击后背景固定不切换问题求解

问题原因 #

1. 原代码中if ($('.services__col').attr("class") == "active-reveal")逻辑错误：该选择器会匹配所有手风琴模块，attr()仅返回第一个元素的类名，且services__col本身带有默认类名，永远不可能等于active-reveal，导致背景切换逻辑不生效。
2. 未统一清除所有背景图的active类，多个背景同时处于激活态时会因层级覆盖出现看起来没有切换的问题。
3. 背景切换逻辑未和当前点击的手风琴激活状态绑定，状态不同步。

修复方案 #

替换原有<script>标签内的JS代码为如下内容即可：

jQuery(document).ready(function($) {
    // 初始状态设置
    $('.services__content').css('height', '0');
    $('.services__col').first().addClass("active-reveal");
    $('.services_bg').first().addClass("active");
    
    $('.services__col').click(function() {
        const isCurrentActive = $(this).hasClass('active-reveal');
        // 统一清除所有手风琴、背景的激活态
        $('.services__col').removeClass('active-reveal');
        $('.services_bg').removeClass('active');

        if (!isCurrentActive) {
            // 点击未激活项，激活当前项和对应背景
            $(this).addClass('active-reveal');
            $(this).next('.services_bg').addClass('active');
        } else {
            // 点击已激活项时收起，默认恢复第一个背景激活，不需要该逻辑可删除此段
            $('.services_bg').first().addClass('active');
        }
        // 补充：如果需要实现手风琴展开收起高度动画，可以保留下面这段
        $('.services__content').css('height', '0');
        $(this).find('.services__content').css('height', isCurrentActive ? '0' : $(this).find('.services__content')[0].scrollHeight + 'px');
    });
});

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