如何用JS实现二次点击已激活按钮时移除其active类并同步折叠状态

存在的错误点 #

• 给#Resume-items li绑定的点击事件逻辑存在问题：每次点击都会无条件给当前li添加active类，完全没有判断当前元素是否已经处于激活状态，二次点击已激活按钮时，即便折叠逻辑正常执行，active类也会被这段代码重新加上，自然不会消失。
• 同时给.btn-Resume-buttons单独绑定的点击事件和li的点击事件存在逻辑重叠，没有同步处理active类的状态，导致类名和折叠面板状态不一致。
• 额外的语法问题：document.getElementsByClassName('.Resume-click-open')写法错误，getElementsByClassName传入参数不需要加类名前缀.，且该方法返回的是DOM集合，不能直接修改style属性。

修复代码 #

直接替换原有JS逻辑即可，不需要修改HTML和CSS：

$(document).on('click', '#Resume-items li', function () {
    const $currentLi = $(this);
    const targetId = $currentLi.find('.btn-Resume-buttons').attr('href');
    // 判断当前关联的面板是否已经是展开状态（点击后会折叠）
    const isPanelOpened = $(targetId).hasClass('show');
    // 先移除所有按钮的激活状态
    $('#Resume-items li').removeClass('active');
    // 只有当面板即将展开时，才给当前按钮加激活类
    if (!isPanelOpened) {
        $currentLi.addClass('active');
    }
    // 修正高度设置的写法
    $('.Resume-click-open').css('height', '100px');
});
// 原有单独绑定的按钮点击事件可以直接删除，bootstrap collapse自带的data属性触发逻辑已经能满足需求

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