复用相同类名的More下拉按钮多次使用时仅首个生效问题求助

安全阿岳

2026-10-2

问题根因

原代码使用document.querySelector('.more')仅能匹配到页面中第一个符合条件的More按钮容器，后续的同类元素完全没有被绑定事件
所有按钮共用全局的状态变量（visible、el、btn等），即使绑定了多个按钮也会出现状态互相干扰的问题

修复后的JS代码

直接替换你原来的JS代码即可，HTML和CSS无需修改：

// 遍历页面所有More按钮容器，给每个单独绑定逻辑、隔离状态
document.querySelectorAll('.more').forEach(el => {
  const btn = el.querySelector('.more-btn');
  const menu = el.querySelector('.more-menu');
  let visible = false;

  function showMenu(e) {
    e.preventDefault();
    // 可选优化：点击当前按钮时先关闭其他所有打开的More菜单
    document.querySelectorAll('.more.show-more-menu').forEach(openEl => {
      if (openEl !== el) {
        openEl.classList.remove('show-more-menu');
        openEl.querySelector('.more-menu').setAttribute('aria-hidden', true);
      }
    });
    if (!visible) {
      visible = true;
      el.classList.add('show-more-menu');
      menu.setAttribute('aria-hidden', false);
      document.addEventListener('mousedown', hideMenu, false);
    }
  }

  function hideMenu(e) {
    if (el.contains(e.target)) {
      return;
    }
    if (visible) {
      visible = false;
      el.classList.remove('show-more-menu');
      menu.setAttribute('aria-hidden', true);
      document.removeEventListener('mousedown', hideMenu);
    }
  }

  btn.addEventListener('click', showMenu, false);
});