如何修改代码让collapsible折叠组件的onclick事件仅作用于图标

解决方案 #

你仅需要修改JS部分的事件绑定逻辑即可，原有CSS和HTML无需做任何调整：

// 选中所有折叠组件的展开/折叠图标
const chevrons = document.querySelectorAll(".collapsible__chevron");
chevrons.forEach((chevron) =>
  chevron.addEventListener("click", function() {
    // 查找当前图标所属的折叠容器，切换展开状态类
    this.closest(".collapsible").classList.toggle("collapsible--expanded");
  })
);

逻辑说明 #

• 原代码将点击事件绑定在整个.collapsible容器上，因此点击容器内任意区域都会触发折叠切换
• 修改后仅将事件绑定到折叠图标上，点击容器内其他区域不会触发切换逻辑
• closest()方法会向上查找最近的匹配类名的父元素，兼容性覆盖所有现代浏览器，即使后续调整图标嵌套层级，只要图标仍在.collapsible容器内逻辑就可正常生效

可选体验优化 #

你可以给图标增加点击手势提示，提升用户操作感知，在CSS中补充以下代码即可：

.collapsible__chevron {
  cursor: pointer;
}

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