Javascript 如何通过单击更改项目的显示属性

我正在一个网站上工作，试图制作一个带有汉堡菜单的手机版本。这个想法是当点击汉堡时，会出现一个下拉菜单。所以我试着这么做

HTML:

和JS：

function changeDisplay() {
    alert("eys");
    document.getElementbyId("dropdown").style.display = "block";
    }

---

警报可以工作，但由于某些原因，它不会将该id的显示改为“阻止”，而不是“无”。有什么想法吗？顺便说一句，我还不允许使用jQuery。

您只能拥有一次ID。将ID移动到

元素中。另外，它的

getElementById

，带有大写的

B

函数更改显示（）{
document.getElementById（“下拉”）.style.display=“block”；
}

#图标img{
填充顶部：10px；
左侧填充：15px；
垫底：5px；
浮动：左；
宽度：50px；
高度：50px；
}
#移动通讯img{
填充顶部：20px；
右边填充：20px；
高度：33像素；
宽度：38px；
浮动：对；
}
#下拉列表{
显示：无；
文字装饰：无；
颜色：黑色；
背景色：黑色；
}

请注意此行中区分大小写的内容：

document.getElementById

（注意大写字母

B

）

html

 <ul id="ul">
        <li ><a href="#">Store</a></li>
        <li ><a href="#">About</a></li>
        <li ><a href="#">Contact</a></li>
 </ul>

---

我给出的第一个建议是不要对元素使用相同的ID 然后试试这个代码

 document.getElementById("ul").style.display = "block";

---

我将方法更改为下拉菜单的工作方式，以显示另一种方式。不要使用JavaScript只影响一种样式（即

显示

），而是使用多个类，这些类反过来控制多个样式

• classList

  用于在两种状态之间切换

  .on

  和

  .off

  • 类上的

    .on指定下拉列表的高度和不透明度

  • .off

    类在下拉列表收缩和淡出时指定下拉列表的高度和不透明度
• 最初，每个
  都有

  #下拉列表

  ID，这是错误的，ID必须始终是唯一的，没有例外。所以现在每个都有一个类（

  .dropdown

  ）。
  • 将

    #下拉列表

    重新分配给
    。最好以父元素为目标，而不是它的每个子元素

注意：通常情况下，下拉菜单可能会以某种方式消失，因此此代码可能会发生。这个函数也是可重用的，可以传递任何简单的CSS选择器

签名

切换状态（目标）

用法 目标：引用元素的字符串。语法与CSS选择器和jQuery对象完全相同

=

“#idOfUL”

=
“.classOfLI”

您在哪里将其设置为“无”id最好是唯一的。如果您想更改所有标签的可见性，请设置id iside ul标签

并将其从li标签中删除您在getElement中有错误，它应该是getElementById，而不是getElementById。我希望更改它，以便可以看到它。显示器已设置为“无”。我想把它改成block。

 <ul id="ul">
        <li ><a href="#">Store</a></li>
        <li ><a href="#">About</a></li>
        <li ><a href="#">Contact</a></li>
 </ul>

 document.getElementById("ul").style.display = "block";

 document.getElementById("ul").style.display = "block";