使用Vanilla JS实现手风琴：无法定位点击元素内子元素问题

嘿，我完全懂你遇到的这个瓶颈——用querySelector()确实只会返回匹配选择器的第一个元素，所以不管你点第几个手风琴，都只会触发第一个的展开收起效果。咱们来快速修复这个问题：

问题根源 #

你之前的代码大概是直接用了document.querySelector('.accordion-text')，它会在整个文档里找第一个带.accordion-text类的元素，而不是你点击的那个手风琴内部的元素。

解决方案：针对当前点击元素查找子元素 #

我们需要在点击事件里，先定位到被点击的那个.accordion元素，再在它内部找对应的.accordion-text。这里有两种常用方法：

方法1：给每个手风琴单独绑定事件

先获取所有手风琴元素，然后遍历给每个添加点击事件，用this指代当前被点击的手风琴：

// 获取所有手风琴元素
const accordions = document.querySelectorAll('.accordion');

// 遍历绑定点击事件
accordions.forEach(accordion => {
  accordion.addEventListener('click', function() {
    // 只在当前点击的手风琴内部查找文本区域
    const targetText = this.querySelector('.accordion-text');
    // 切换展开/收起的状态（这里用类来控制样式）
    targetText.classList.toggle('active');
  });
});

方法2：事件委托（更高效，适合动态添加的手风琴）

如果之后可能会动态添加手风琴，推荐用事件委托——把事件绑定到父容器上，通过事件冒泡来处理：

// 假设所有手风琴都在一个容器里（如果没有可以用document.body）
document.querySelector('.accordion-container').addEventListener('click', function(e) {
  // 找到点击事件触发的最接近的手风琴元素
  const clickedAccordion = e.target.closest('.accordion');
  
  if (clickedAccordion) {
    // 在当前手风琴内部找文本区域
    const targetText = clickedAccordion.querySelector('.accordion-text');
    targetText.classList.toggle('active');
  }
});

配套CSS（实现展开收起的过渡效果） #

记得给.accordion-text加上过渡样式，配合active类实现平滑展开：

.accordion {
  margin: 1rem 0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.accordion h1 {
  padding: 1rem;
  margin: 0;
  cursor: pointer;
  background-color: #f8f8f8;
}

.accordion-text {
  padding: 0 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-text.active {
  max-height: 200px; /* 设一个足够容纳内容的高度 */
  padding: 1rem;
}

为什么这样有效？ #

• this在事件处理函数里，指向的是当前被点击的.accordion元素，不是所有手风琴。
• this.querySelector('.accordion-text')只会在当前手风琴的子元素里查找，不会跑到整个文档里找第一个匹配项。

这样修改后，点击哪个手风琴，就只会展开收起对应的文本区域啦！

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