HTML 多实例 Kebab 菜单的正确实现方法

使用 `document.queryselector` 只能获取首个匹配元素，导致 kebab 菜单仅对第一个博客生效；应改用 `queryselectorall` 遍历所有 `.kebab` 元素，并为每个实例独立绑定点击事件，同时通过 css 层级选择器（如 `.active .middle`）实现局部状态控制。

在构建博客列表、卡片式布局或任何需复用交互组件的场景中，Kebab（垂直三点）菜单是常见的操作入口。但若直接使用 document.querySelector('.kebab') 绑定事件，JavaScript 仅会捕获 DOM 中第一个匹配元素——这正是你遇到“仅首条博客菜单可展开”的根本原因。

✅ 正确做法：批量绑定 + 局部作用域控制

首先，将 querySelector 替换为 querySelectorAll，获取所有 .kebab 容器节点，并用 forEach 为每个实例单独添加事件监听器：

const kebabs = document.querySelectorAll('.kebab');
kebabs.forEach(kebab => {
  kebab.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

该写法确保每个 .kebab 元素拥有独立的交互逻辑，点击时仅切换自身的 active 状态，避免跨实例干扰。

? CSS 适配：基于父级状态驱动子元素动画

由于多个 Kebab 实例共存，不能再依赖全局类名（如 .middle.active），而应采用后代选择器，让样式响应父容器的状态变化：

/* 默认状态 */
.middle {
  transform: scale(1);
  transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
}

/* 当父级 .kebab 拥有 .active 类时，激活子元素 */
.kebab.active .middle {
  transform: scale(4.5);
  transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);
}

.kebab.active .cross {
  transform: translate(-50%, -50%) scale(1);
}

.kebab.active .dropdown {
  transform: scale(1);
}

这种「父控子」模式使每个 Kebab 的动画、显隐逻辑完全解耦，无需为每个实例生成唯一 ID 或额外 JS 状态管理。

? 补充建议与注意事项

• 避免内联样式冲突：确保 .dropdown 的 position: absolute 依赖其最近的 position: relative 父容器 —— 此处 .kebab 已设为 relative，符合预期；若结构嵌套变更，请检查定位上下文。
• 可访问性增强：为 .kebab 添加 role="button" 和 tabindex="0"，并补充键盘支

  

  持（如 Enter/Space 触发）：

  kebab.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      kebab.click();
    }
  });

• 性能提示：若博客数量极大（如 >100 条），可考虑事件委托（监听父容器），但需注意 .dropdown 为绝对定位，推荐维持当前直接绑定策略，简洁可靠。

最终，只需三步即可完成多实例 Kebab 菜单的健壮实现：
① querySelectorAll 获取全部目标；
② forEach + addEventListener 分别绑定；
③ CSS 使用 .kebab.active > .middle 等层级选择器精准控制视觉反馈。

这样，无论页面渲染 2 个还是 200 个博客卡片，每个 Kebab 菜单都将独立、稳定、无障碍地工作。