如何为自定义jQuery手风琴组件添加active类

嘿，这事儿超简单！我来帮你调整这个轻量手风琴脚本，给展开的区块加上active类——不管是触发标题还是内容面板，都能轻松实现。

先假设你的原始脚本大概是这样的（如果和你的实际代码选择器不同，替换成你自己的就行）：

// 原始手风琴脚本
const accordionTriggers = document.querySelectorAll('.accordion-trigger');

accordionTriggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    const content = trigger.nextElementSibling;
    // 切换内容显示/隐藏
    content.style.display = content.style.display === 'block' ? 'none' : 'block';
  });
});

基础版：给当前面板添加Active类 #

只需要在切换显示状态的同时，用classList.toggle()来添加/移除active类就行——既可以给触发按钮加，也可以给内容区块加，看你的样式需求：

// 添加了active类的基础版手风琴
const accordionTriggers = document.querySelectorAll('.accordion-trigger');

accordionTriggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    const content = trigger.nextElementSibling;
    const isExpanded = content.style.display === 'block';
    
    // 切换内容的显示状态
    content.style.display = isExpanded ? 'none' : 'block';
    
    // 给触发元素（比如标题）切换active类
    trigger.classList.toggle('active');
    
    // （可选）给内容区块也切换active类，如果需要的话
    content.classList.toggle('active');
  });
});

进阶版：每次只展开一个面板（互斥模式） #

如果希望手风琴每次只能展开一个面板（点击新面板时自动收起旧的），可以再加一段逻辑，先重置所有其他面板的状态：

// 互斥模式手风琴（单面板展开）
const accordionTriggers = document.querySelectorAll('.accordion-trigger');

accordionTriggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    const content = trigger.nextElementSibling;
    const isExpanded = content.style.display === 'block';
    
    // 先收起所有其他面板，并移除它们的active类
    accordionTriggers.forEach(otherTrigger => {
      const otherContent = otherTrigger.nextElementSibling;
      if (otherTrigger !== trigger) {
        otherContent.style.display = 'none';
        otherTrigger.classList.remove('active');
        otherContent.classList.remove('active');
      }
    });
    
    // 切换当前面板的状态和active类
    content.style.display = isExpanded ? 'none' : 'block';
    trigger.classList.toggle('active');
    content.classList.toggle('active');
  });
});

配合样式使用 #

有了active类之后，你就可以自定义展开状态的样式了，比如：

/* 示例：展开状态的标题样式 */
.accordion-trigger.active {
  background-color: #f5f5f5;
  color: #2d3748;
  font-weight: 600;
}

/* 示例：展开状态的内容面板样式 */
.accordion-content.active {
  border-left: 3px solid #3182ce;
  padding-left: 12px;
}

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