javascript - 打开菜单时将 CSS 类应用于正文

Question

我目前正在使用 LitElement 开发一个 Web 项目，并且我有一个菜单，当我单击 hamburguer 按钮时会显示，当我单击关闭按钮或导航到其他页面时会关闭。

我的问题是我想应用 CSS 属性overflow: hidden;以停止页面其余部分的滚动（因为我的菜单具有 100% 的宽度和高度），并在菜单关闭时删除该属性。

当我单击菜单按钮时，组件Menu被创建，当我单击关闭按钮（或导航到另一个页面）时，组件被删除，所以我必须在一个组件中应用并overflow在另一个组件上删除它。

所以，我的问题是，如何做到这一点？

score 0 · Accepted Answer

尝试在addEventListener下面像我一样使用。

document.querySelector('.burger').addEventListener('click', () => {
   document.body.classList.toggle('activeBurger');
})

.activeBurger {
   overflow:hidden;
}

<button class="burger"></button>

1 回答 1