Javascript 切换CSS类对元素没有影响

我正在尝试创建一个基本的JavaScript下拉菜单。我正在切换一个名为“show”的类，它显示下拉内容。它将不起作用-即使应用了类，元素仍保持隐藏状态

我想我在这里的某个地方出错了，但我似乎找不到。救命啊

函数drop（）{
document.getElementById（'content'）.classList.toggle（'show'）；
}

.container{
显示：内联块；
位置：相对位置；
}
.下拉列表\u btn{
颜色：白色；
背景色：黑色；
光标：指针；
填充：20px；
}
.dropdown\u btn:悬停，.dropdown\u btn:焦点{
背景颜色：灰色；
}
#内容{
显示：无；
位置：绝对位置；
背景：灰色；
颜色：白色；
宽度：160px；
}
.货柜a{
文字装饰：无；
显示：块；
填充：10px；
颜色：白色；
}
.容器a：悬停{
背景色：#f1f1
}
.表演{
显示：块；
}

菜单

问题不在于JavaScript，而在于CSS。 您的

#内容

样式规则比

.show

规则更具体。当您打开和关闭

.show

规则时，

#content

规则将覆盖它，该规则表示

显示

应为

无

有关哪些选择器将覆盖其他选择器的更多信息，请参见。还有一个，您可以测试选择器，看看它们的特异性是什么。使用该站点的“计算器”，您可以看到基于

id

的选择器将始终覆盖“类”选择器

解决方案是将

#content

选择器更改为类选择器，我在这里已经完成了（

.menu

）。这样，您将有两个影响下拉菜单的类选择器，它们都具有相同的特性（覆盖另一个的一个将由应用的最后一个确定）

函数drop（）{
document.getElementById（'content'）.classList.toggle（'show'）；
}

.container{
显示：内联块；
位置：相对位置；
}
.下拉列表\u btn{
颜色：白色；
背景色：黑色；
光标：指针；
填充：20px；
}
.dropdown\u btn:悬停，.dropdown\u btn:焦点{
背景颜色：灰色；
}
/*这曾经是一个基于id的选择器（#content），但是
选择器的类型比类选择器更具体，所以
切换类选择器没有效果*/
.菜单{
显示：无；
位置：绝对位置；
背景：灰色；
颜色：白色；
宽度：160px；
}
.货柜a{
文字装饰：无；
显示：块；
填充：10px；
颜色：白色；
}
.容器a：悬停{
背景色：#f1f1
}
/*这是将要打开和关闭的类。
因为隐藏此菜单的CSS规则使用
类选择器，另一个类选择器可以覆盖它*/
.表演{
显示：块；
}

菜单

您有一个已关闭的

标签，但尚未打开一个。修正了。但它不会影响javascript。丢失了一些东西您进行了什么样的调试？有JavaScript错误吗？您是否检查了HTML以查看类是否发生了更改？“它不起作用”永远都不是一个好的描述problem@cale_b你真的是在找我吗？我以为这个网站是为了帮助人们…你这里的东西很有用，但是我要离开一个w3school的课程，它说这应该适用于普通的javascript：这就是w3school说的工作：function myFunction（）{document.getElementById（“myDropdown”）.classList.toggle（“show”）；}@jseabolt javascript很好。在提问之前，您应该进行一些调试，以便解释您所尝试的内容。@J Seabolt不客气。别忘了将此标记为答案。