使用 `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 菜单都将独立、稳定、无障碍地工作。
