jQuery实现点击按钮单独触发对应卡片手风琴展开功能问题求助

问题原因 #

• 使用id #fuelAccordion 绑定点击事件不符合多卡片的使用场景：DOM规范要求id全局唯一，多卡片重复使用相同id会导致事件只能绑定到第一个匹配的元素，无法适配多卡片的交互需求。
• $(this).find() 方法的作用是查找当前元素的后代节点，你点击的触发按钮和目标手风琴面板cardAccordion不存在后代包含关系，两者是同属卡片容器.fuelCard下的不同分支节点，所以找不到目标元素。

修正方案 #

1. 替换触发元素的唯一id为通用类名，避免id重复冲突，比如给触发按钮添加类名accordion-trigger
2. 点击事件绑定到通用类名上，先通过closest()方法向上查找当前按钮所属的卡片容器，再在该容器内查找对应手风琴面板，即可实现单卡片独立控制。

代码示例 #

修正后JS代码 #

$('.accordion-trigger').click(function() {
  $(this).closest('.fuelCard').find('.cardAccordion').slideToggle();
})

修正后HTML触发按钮代码 #

<i class="fas fa-angle-down pointer accordion-trigger"></i>

补充说明 #

closest() 方法会从当前元素开始向上遍历DOM树，返回第一个匹配选择器的祖先元素，在这里可以精准定位到当前按钮所属的卡片容器，再在容器内查找手风琴面板，就不会影响其他卡片的状态。

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