如何切换菜单可见性

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

我需要做的是，当你点击“.menu-button”时，它会改变：

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

对此：

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

有任何想法吗？ 提前感谢您的时间

Answer 1

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

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.toggle() ：

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

---

使用隐藏的复选框控制 state

这是一个完全没有 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 获取该元素，然后像这样将 class 添加到它

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

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