Как отменить функцию 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

Вы можете просто добавить новый класс CSS:

.body-overflow {
  overflow: hidden;
}

и в своей функции javascript добавить еще .classList.toggle(), но на этот раз в теле:

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

Answer 2

Вы можете удалить атрибут стиля, используя:

document.body.style.overflow = null