下拉菜单切换异常：点击第二个下拉仅触发第一个内容

你的问题核心在于全局只选择了第一个.menu-block元素：代码中const menuBlock = document.querySelector('.menu-block')只会获取页面中第一个匹配该类名的元素，导致所有下拉触发按钮的点击事件都只会切换第一个下拉菜单的显示状态。

修正后的JavaScript代码 #

需要在点击事件中，通过当前触发元素定位到其内部对应的下拉菜单，而非全局选择第一个：

const menuListDropdown = document.querySelectorAll('.menu-block-dropdown');

menuListDropdown.forEach((menuBlockList) => {
  menuBlockList.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    // 获取当前触发元素内部的下拉菜单
    const targetMenu = this.querySelector('.menu-block');
    targetMenu.classList.toggle('menu-block-active');
  })
})

额外CSS优化建议 #

为了让下拉菜单相对于父元素正确定位，建议给.menu-block-dropdown添加相对定位：

.menu-block-dropdown {
  position: relative;
  display: inline-block; /* 根据布局需求调整，确保横向排列 */
}

这样.menu-block的position: absolute会相对于父元素定位，避免出现位置偏移问题。

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