时间戳

首页 > 解决方案 > 动画汉堡

javascript - 动画汉堡

问题描述

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

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

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

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

      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’

标签： javascripthtmljquerycss

解决方案

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

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

推荐阅读