Javascript 如何切换菜单可见性

我试图编码一个汉堡菜单，将改变符号从“-”到“x”点击，并显示菜单

第一部分我已经做完了。符号在单击时更改/切换，但我不知道如何显示菜单

这是我的工作代码

const menuButton = document.querySelector(".menu-button");

let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

//function
function toggolmenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    showMenu = false;
  }
}

我需要做的是，当您单击“.menu”按钮时，它将从以下位置更改：

…

为此：

…

---

有什么想法吗？提前感谢您的时间

您需要通过ID获取该元素，然后像这样向其添加类

document.getElementById("MyElement").classList.add('show-menu-body');

---

要使此代码正常工作，您需要将ID添加到该div。但它必须是唯一的

与您已有的类似，将类切换到菜单元素：

const menuButton = document.querySelector(".menu-button");
const menu       = document.querySelector(".menu-body");

let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

//function
function toggolmenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    menu.classList.add("show-menu-body");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
     menu.classList.remove("show-menu-body");
    showMenu = false;
  }
}

或者使用以这种方式：

const menuButton = document.querySelector(".menu-button");
const menu       = document.querySelector(".menu-body");
let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

function toggolmenu() {
  showMenu = !showMenu;
  menuButton.classList.toggle("close", showMenu);
  menu.classList.toggle("show-menu-body", showMenu);
}

---

使用隐藏复选框控制状态 下面是一个完全没有JavaScript的示例，只是一个复选框和CSS

：checked

pseudo.
使用通用同级组合选择器

~

/*QuickReset*/*{margin:0；框大小：border-box；}
#菜单切换器{
位置：绝对位置；
不透明度：0；
}
#菜单btn{
位置：固定；
z指数：101；
填充：10px；
字号：2em；
光标：指针；
}
#菜单btn：之前{
内容：“\2630”；
}
#菜单{
位置：固定；
z指数：100；
排名：0；
底部：0；
左：0；
最小宽度：200px；
过渡：0.5s；
转化：translateX（-100%）；
垫顶：4em；
背景#f48024；
}
/*检查状态*/
#菜单切换器：选中~#菜单btn:之前{
内容：“\2715”；
}
#菜单切换器：选中~#菜单{
变换：translateX（0）；
}

洛勒姆
Ipsum
多洛

让我知道这是否有效。：）

试试这个：

const menuButton = document.querySelector(".menu-button");
const menuBody = document.querySelector(".menu-body");

let showMenu = false;

function toggleMenu() {
  if (showMenu === false) {
    menuButton.classList.add("close");
    menuBody.classList.add("show-menu-body");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    menuBody.classList.remove("show-menu-body");
    showMenu = false;
  }
}

menuButton.addEventListener("click", toggleMenu);

当然，

.show菜单体

必须具有类似于

display:block的内容

用

显示覆盖
菜单体
：无。我遵循了您的路径，但您有几个选项可以实现这一点（还可以添加CSS转换以改进切换）

看起来您可以使用与
close
类和
show menu body
类相同的技术。此外，您在这方面似乎没有使用jquery。这就像是一种魅力。谢谢你，好人！送上许多祝福，谢谢你@马苏
const menuButton = document.querySelector(".menu-button");
const menuBody = document.querySelector(".menu-body");

let showMenu = false;

function toggleMenu() {
  if (showMenu === false) {
    menuButton.classList.add("close");
    menuBody.classList.add("show-menu-body");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    menuBody.classList.remove("show-menu-body");
    showMenu = false;
  }
}

menuButton.addEventListener("click", toggleMenu);

.menu-body {
  display: none;
}

.show-menu-body {
  display: block;
}