Javascript 按下图标，从顶部滑入下拉移动菜单

我希望我的手机下拉菜单在用户单击“header downbar menu”（标题下拉菜单）图标时从顶部滑入，在用户再次单击时滑出到顶部。现在，按钮只能显示菜单，但我不知道如何正确地为这部分编写JS

var-DropdownMenuDown=false；
函数OpenDropdownMenu（）{
如果（DropdownMenuDown==false）{
document.getElementById（“标题下拉菜单”）.style.top=“0px”；
}
}

。标题下拉列表{
宽度：100%；
位置：相对位置；
}
.标题下拉菜单{
宽度：100%；
高度：80vh；
背景色：白色；
位置：绝对位置；
顶部：-80vh；
}

---

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

var DropdownMenuDown = false;

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

---

“标题下拉菜单”不是id，而是classname

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

var DropdownMenuDown = false;

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

---

“标题下拉菜单”不是id，而是classname

我建议您为此使用切换

看这里：

功能显示菜单（）{
var topmenu=document.querySelector（'.topmenu'）；
topmenu.classList.toggle（'show-me'）；
}

正文{
保证金：0；
}
#背景{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#AEAEAE；
}
.topmenu{
位置：绝对位置；
高度：60px；
顶部：-60px；
宽度：100%；
背景色：红色；
z指数：99；
}
.给我看看{
顶部：0！重要；
}
钮扣{
位置：绝对位置；
顶部：60px；
左：0；
}

菜单请！

我建议您为此使用切换

看这里：

功能显示菜单（）{
var topmenu=document.querySelector（'.topmenu'）；
topmenu.classList.toggle（'show-me'）；
}

正文{
保证金：0；
}
#背景{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#AEAEAE；
}
.topmenu{
位置：绝对位置；
高度：60px；
顶部：-60px；
宽度：100%；
背景色：红色；
z指数：99；
}
.给我看看{
顶部：0！重要；
}
钮扣{
位置：绝对位置；
顶部：60px；
左：0；
}

菜单请！