如何撤消JavaScript函数

Question

我有一个这样的函数，可以切换我的下拉菜单。

<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<a id="mobile-nav" href="#">
<div class="container1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>.
</div>
</a>
</div>
<script>
function myFunction(x) {
x.classList.toggle('change');
document.body.style.overflow ='hidden'
}
</script>

它的最后一部分

document.body.style.overflow = 'hidden'

防止页面在下拉菜单打开时在顶部溢出。问题是，当我单击菜单栏时，当溢出消失时，再次单击栏会显示页面，但由于溢出被隐藏而锁定它。

我想撤消

document.body.style.overflow = 'hidden'

当菜单关闭时，我最接近理解的是功能doBack。我可以以某种方式将doBack添加到现有函数中吗？

手机页面在这里

这是一个WordPress网站，上面的javascript通过按栏来切换下拉菜单。为了扩展下拉列表，我使类collapse更大，如下所示。

@media (max-width: 768px) {
.collapse {
position: absolute;
height: 775px;
background-color: white;
z-index: 99999 !important;
top: 75px;
left: -50px;
line-height: 10px;
}
}

.HTML：

<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-15050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
<a title="Contact" href="url">Contact
<ul role="menu" class="dropdow n-menu">
</ul>
</a>
</li>
</ul>
</div>
</div>
</div>

Answer 1

您可以使用以下命令消除样式属性：

document.body.style.overflow = null

Answer 2

您可以简单地添加新的 CSS 类：

.body-overflow {
overflow: hidden;
}

并在您的 JavaScript 函数中添加另一个.classList.toggle()但这次是在正文上：

function myFunction(x) {
x.classList.toggle('change');
document.body.classList.toggle('body-overflow');
}