动画汉堡

Question

我有这个JavaScript代码，用于控制动画汉堡包和移动导航菜单。当我单击它时，它将在移动视图中打开导航菜单，并将主体设置为隐藏溢出。

基本上，当我单击汉堡包图标时，它将打开移动导航菜单，而当我进行选择时，例如关于页面或主页，它将转到关于或主页，并且主体溢出设置为自动。这就是我想看到的。

但是，如果我单击汉堡包图标，打开移动导航菜单，但我没有进行任何选择，而是再次单击汉堡包图标以关闭导航菜单，则身体溢出保持隐藏状态，因此我无法滚动页面。

如果我在导航菜单上未进行任何选择，我希望身体溢出恢复到自动状态。

 <Input inputContainerStyle={{ borderWidth: 0, borderColor: "transparent" }}
    placeholder="Test placeholder...."/>

请帮忙吗？还是有一种方法可以使用classList.add和classList.remove而不是切换到类似下面的内容

      var menuIcon = document.querySelector('.hamburger-icon'); 
      var navbar = document.querySelector('#header');

      menuIcon.addEventListener('click', function(){
      navbar.classList.toggle('change'); 
      document.body.style.overflow = ‘hidden’

     });

Answer 1

也许您可以尝试检查导航栏上是否存在类“ change”

var menuIcon = document.querySelector(".hamburger-icon");
var navbar = document.querySelector("#header");

menuIcon.addEventListener("click", function () {
  navbar.classList.toggle("change");
  if (navbar.classList.contains("change")) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "auto";
  }
});