响应式导航菜单：（使用 html 和 Css）切换菜单不起作用

Question

我正在开发一个用于构建电子商务网站的简单导航菜单。 当我将 window 的大小重新调整为小于 800 像素时，我希望菜单能够响应，但是当我触摸菜单图标时，切换菜单不起作用，它不会消失，选项已经显示并且不会消失

#这里是我的代码https://github.com/roshini004/ecommerce-site.git的链接

Answer 1

首先，在 Javascript 中，我们不倾向于像 MenuItems 那样以大写字母开头的变量； 它可能会在 JS 中弄乱一些 OOP 的东西，有时自动完成可能会混淆它。

但是在这种情况下，你需要在javascript中驼峰式css styles。 （最大高度，不是最大高度）

var MenuItems = document.getElementById("MenuItems");

MenuItems.style.maxHeight = "0px";

function menutoggle() {
    console.log("clicked");
    if(MenuItems.style.maxHeight == "0px")
        {
        MenuItems.style.maxHeight = "200px";
    }
    else
    {
        MenuItems.style.maxHeight = "0px";
    }
}