JavaScript事件监听器实现产品手风琴菜单交互异常求助

• 绑定点击事件时用document.querySelector筛选触发元素，该方法只会返回页面上第一个匹配的箭头按钮，剩下三个按钮完全没有绑定事件，因此仅第一个箭头能响应点击。
• 处理展开状态的逻辑存在元素定位错误：遍历已展开卡片时，错误修改了thisProduct.element的指向，导致最后被切换状态的元素根本不是用户点击的那一个，出现全量展开、交互错位的问题。

initAccordion(){
  const thisProduct = this;
  // 选中页面所有匹配的箭头触发元素，而非仅第一个
  const allTriggers = document.querySelectorAll(select.menuProduct.clickable);

  // 给每个触发元素单独绑定点击事件
  allTriggers.forEach(trigger => {
    trigger.addEventListener('click', function(event) {
      event.preventDefault();
      // 从当前点击的箭头向上定位对应产品卡片
      const currentProduct = trigger.closest(select.menuProduct.element);
      // 获取所有当前处于展开状态的卡片
      const activeProducts = document.querySelectorAll(select.all.menuProductsActive);

      // 移除所有卡片的展开状态类
      activeProducts.forEach(activeItem => {
        activeItem.classList.remove(classNames.menuProduct.wrapperActive);
      });

      // 若当前点击的卡片之前没有展开，则给它加上展开类实现展开效果
      // 若之前已展开，上面的逻辑已经移除了展开类，就自然实现折叠
      if (!currentProduct.classList.contains(classNames.menuProduct.wrapperActive)) {
        currentProduct.classList.add(classNames.menuProduct.wrapperActive);
      }
    });
  });
}

• 四个箭头按钮全部会响应点击，不会再出现仅单个按钮生效的问题。
• 点击任意箭头，只会展开当前箭头所属的产品区块，不会触发其他区块同时展开。
• 再次点击同一个箭头，就会折叠当前展开的区块，符合预期交互。

注意：需要提前确认select.menuProduct.element的配置值和HTML中产品卡片的根元素选择器（即.product类）保持匹配，避免定位失败。

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