按图标从顶部滑入下拉移动菜单答案

【问题标题】：Dropdown mobile menu sliding in from top by pressing the Icon按图标从顶部滑入下拉移动菜单
【发布时间】：2021-05-19 18:01:45
【问题描述】：

我希望我的移动下拉菜单在用户单击“header-downbar-menu”图标时从顶部滑入，并在用户再次单击时滑出到顶部。目前按钮只能显示菜单，但我不知道如何正确编写这部分的 JS...

var DropdownMenuDown = false;

function OpenDropdownMenu() {
  if (DropdownMenuDown == false) {
    document.getElementById("header-dropdown-menu").style.top = "0px";
  }
}

.header-dropdown {
  width: 100%;
  position: relative;
}

.header-dropdown-menu {
  width: 100%;
  height: 80vh;
  background-color: white;
  position: absolute;
  top: -80vh;
}

<div class="header-downbar-menu" onclick="OpenDropdownMenu()">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div class="header-dropdown">
  <div id="header-dropdown-menu" class="header-dropdown-menu">

  </div>
</div>

我无法使 var "DropdownMenuDown" 工作

【问题讨论】：

标签： javascript html css dropdown

【解决方案1】：

我建议您为此使用 toggle。

看这里：

function showMenu() {
  var topmenu = document.querySelector('.topmenu');
    topmenu.classList.toggle('show-me');
}

body {
  margin: 0;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #AEAEAE;
}

.topmenu {
  position: absolute;
  height: 60px;
  top: -60px;
  width: 100%;
  background-color: red;
  z-index: 99;
}

.show-me {
  top: 0 !important;
}


button {
  position: absolute;
  top: 60px;
  left: 0;
}

<div id="bg">
  <div class="topmenu">
  </div>
  <button onclick="showMenu()">Menu pls!</button>
</div>

【讨论】：

【解决方案2】：

我刚刚阅读了您的问题。我认为您不知道文档的选择器。在你的情况下，代码应该是这样的。

var DropdownMenuDown = false;

function OpenDropdownMenu() {
  if (DropdownMenuDown == false) {
    document.getElementByClassName("header-dropdown-menu").style.top = "0px";
  }
}

“header-dropdown-menu”不是id，而是classname！

【讨论】：