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

Question

我目前正在使用LitElement进行一个web项目，我有一个菜单，当我单击hamburguer按钮时会显示，当我点击关闭按钮或导航到其他页面时会关闭。

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

当我单击菜单按钮时，会创建组件Menu，当我单击关闭按钮(或导航到另一个页面(时，会删除该组件，因此我必须在一个组件中应用overflow，然后在另一个组件上删除它。

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

Answer 1

试着像下面的我一样使用addEventListener。

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

.activeBurger {
overflow:hidden;
}

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