如何切换菜单可见性

Question

我正在尝试编写一个汉堡菜单，点击后将符号从"-"更改为"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;
}
}

我需要做的是，当你点击".菜单按钮"时，它将从此更改：

<div class="menu-body">...</div>

到此：

<div class="menu-body show-menu-body">...</div>

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

Answer 1

与您现有的类似，也可以将类切换到Menu元素：

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

或者使用Element.classList.thoggle((:

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伪代码
要确定下一个元素的目标和样式，请使用General Sibling Combinator选择器~

/* QuickReset */ * {margin:0; box-sizing:border-box;}
#menu-toggler {
position: absolute;
opacity: 0;
}
#menu-btn {
position: fixed;
z-index: 101;
padding: 10px;
font-size: 2em;
cursor: pointer;
}
#menu-btn:before {
content: "2630";
}
#menu {
position: fixed;
z-index: 100;
top:0;
bottom: 0;
left: 0;
min-width: 200px;
transition: 0.5s;
transform: translateX(-100%);
padding-top: 4em;
background: #f48024;
}
/* CHECKED STATES */
#menu-toggler:checked ~ #menu-btn:before {
content: "2715";
}
#menu-toggler:checked ~ #menu {
transform: translateX(0);
}

<input id="menu-toggler" aria-controls="menu" type="checkbox">
<label id="menu-btn" for="menu-toggler" aria-controls="menu-tog" aria-label="Toggle Menu"></label>
<nav id="menu">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>

Answer 2

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

const menuButton = document.querySelector(".menu-button");
const menuBody = document.querySelector(".menu-body"); // grab the menu element
let showMenu = false;
menuButton.addEventListener("click", toggolmenu);
//function
function toggolmenu() {
if (!showMenu) {
menuButton.classList.add("close");
menuBody.classList.remove("show-menu-body");  // when menu is closed we remove the class
showMenu = true;
} else {
menuButton.classList.remove("close");
menuBody.classList.add("show-menu-body"); // when menu is open we add the class
showMenu = false;
}
}

Answer 3

试试这个：

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-menu-body必须具有类似display: block;的内容才能用display: none;覆盖.menu-body。我遵循了你的路径，但你有几个选项可以实现这一点(也可以添加CSS转换来改进切换(。

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

Answer 4

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

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

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