已实现按钮切换hdrmnu的active类，如何点击页面别处移除该类？

你可以通过给document添加全局点击事件监听，结合事件对象的target属性判断点击区域，来实现点击外部关闭菜单的功能，同时要阻止按钮点击事件的冒泡，避免触发全局事件导致菜单状态异常。

修改后的代码如下：

const servicebutton = document.querySelector('.servicebutton');
const hdrmnu = document.querySelector('.hdrmnu');

// 按钮点击事件：切换菜单状态，阻止事件冒泡
servicebutton.onclick = function(e){
  e.stopPropagation(); // 阻止事件向上冒泡到document，避免触发全局点击事件
  hdrmnu.classList.toggle('active');
}

// 全局点击事件：判断点击区域，关闭菜单
document.onclick = function(e){
  // 点击的不是按钮，也不是菜单内部元素时，移除active类
  if(e.target !== servicebutton && !hdrmnu.contains(e.target)){
    hdrmnu.classList.remove('active');
  }
}

关键说明： #

• e.stopPropagation()：阻止按钮的点击事件冒泡到document，确保点击按钮切换菜单时，不会立刻触发全局事件导致菜单刚打开就关闭。
• hdrmnu.contains(e.target)：判断点击目标是否属于菜单内部元素（比如菜单里的选项、链接），如果是则不关闭菜单，避免误操作。

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