点击下拉菜单按钮切换body的overflow为hidden/scroll的实现求助

我正好遇到过类似的情况，你当前的代码只做了「设置overflow为hidden」这一步，没有判断当前状态来做切换，所以第二次点击自然没反应。给你两种靠谱的解决方案：

方案一：直接在点击事件里判断切换状态 #

把你的链接点击事件改成带判断逻辑的版本，这样每次点击都会切换overflow的值：

<a href="#" onclick="
  document.body.style.overflow = document.body.style.overflow === 'hidden' ? 'scroll' : 'hidden';
  return false;
">切换下拉菜单</a>

• 这里用三元运算符判断当前body的overflow状态，如果已经是hidden就改成scroll，反之则设为hidden
• 加上return false是为了阻止链接默认的跳转行为（避免点击后页面回到顶部）

方案二：用CSS类切换（更推荐，易维护） #

直接操作样式虽然快，但用类来管理状态更清晰，也方便后续扩展样式。之前你用类的方式没成功，大概率是CSS优先级不够，试试这样写：

首先在CSS里定义禁止滚动的类：

/* 用!important确保优先级足够，或者用更具体的选择器比如html.body-no-scroll */
.body-no-scroll {
  overflow: hidden !important;
}

然后在链接的点击事件里切换这个类：

<a href="#" onclick="
  document.body.classList.toggle('body-no-scroll');
  return false;
">切换下拉菜单</a>

classList.toggle()方法会自动检测元素是否有这个类：有就移除，没有就添加，完美实现切换效果。

另外小提醒：如果你的下拉菜单是用JS控制显示/隐藏的，也可以把这个滚动控制逻辑和菜单的显示逻辑绑定在一起，比如菜单显示时给body加类，隐藏时移除类，这样逻辑更统一~

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