多博客页面Kebab菜单仅首个生效问题求助

document.querySelector('.kebab')仅会返回页面中第一个匹配.kebab类的元素，导致只有第一篇博客的Kebab菜单绑定了点击事件；同时原代码直接获取全局的.middle、.cross、.dropdown元素，即使绑定多个kebab，点击时也只会操作第一个博客的对应元素，而非当前点击的目标。

需要获取所有.kebab元素并逐个绑定点击事件，且在事件中仅操作当前点击的kebab内部的子元素。

修改后的JavaScript代码 #

// 获取页面中所有kebab元素
const kebabs = document.querySelectorAll('.kebab');

// 遍历每个kebab，绑定独立的点击事件
kebabs.forEach(kebab => {
  // 获取当前kebab容器内的目标子元素
  const middle = kebab.querySelector('.middle');
  const cross = kebab.querySelector('.cross');
  const dropdown = kebab.querySelector('.dropdown');

  kebab.addEventListener('click', function() {
    middle.classList.toggle('active');
    cross.classList.toggle('active');
    dropdown.classList.toggle('active');
  });
});

多博客页面的HTML结构示例 #

确保每个博客条目包含独立的.kebab容器，示例如下：

<!-- 第一篇博客 -->
<div class="blog-item">
  <h2>博客标题1</h2>
  <p>博客内容摘要...</p>
  <div class="kebab">
    <figure></figure>
    <figure class="middle"></figure>
    <p class="cross">x</p>
    <figure></figure>
    <ul class="dropdown">
      <li><a href="#">编辑</a></li>
      <li><a href="#">删除</a></li>
      <li><a href="#">分享</a></li>
    </ul>
  </div>
</div>

<!-- 第二篇博客 -->
<div class="blog-item">
  <h2>博客标题2</h2>
  <p>博客内容摘要...</p>
  <div class="kebab">
    <figure></figure>
    <figure class="middle"></figure>
    <p class="cross">x</p>
    <figure></figure>
    <ul class="dropdown">
      <li><a href="#">编辑</a></li>
      <li><a href="#">删除</a></li>
      <li><a href="#">分享</a></li>
    </ul>
  </div>
</div>

补充说明 #

• querySelectorAll返回所有匹配的元素集合，通过forEach遍历实现批量事件绑定
• 使用kebab.querySelector('.xxx')精准获取当前容器内的子元素，确保操作仅作用于当前点击的博客菜单
• CSS代码无需修改，类选择器可直接复用在多个元素上

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