动画汉堡

Question

我有控制动画汉堡包和移动导航菜单的 JavaScript 代码。当我点击它时，它会在移动视图中打开导航菜单并将正文设置为溢出隐藏。

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

但是，如果我点击汉堡图标，打开移动导航菜单，我没有做任何选择，而是再次点击汉堡图标关闭导航菜单，body overflow 保持隐藏，所以我不能滚动页面。

如果我没有在导航菜单上进行任何选择，我希望正文溢出返回到自动。

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

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

     });

有什么帮助吗？或者有没有办法使用 classList.add 和 classList.remove 而不是切换来编写类似下面的内容

    if(open){
        Navbar.classList.add(‘change’);
        document.body.style.overflow = ‘hidden’
    }else{
        Navbar.classList.add(‘change’);
        document.body.style.overflow = ‘auto’
     

Answer 1

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

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";
  }
});