Javascript 如何为隐藏的子菜单应用css规则？

如何为隐藏子菜单应用css规则？我已经尝试添加一些JS，但有一个问题，因为它不起作用。 下面是我工作的代码示例。想法是在点击锚定文本“A”时，它应该显示一个子菜单。提前感谢您的建议

var sub=document.querySelector（“子框”），
subToggle=document.querySelector（“子菜单”）；
如果（小计）{
subToggle.addEventListener（“单击”，
职能（e）{
如果（子类名称==“打开”）{
sub.className=“”；
}否则{
sub.className=“打开”；
}
e、 预防默认值（）；
}，假）；
}

正文{
背景：#fff；
字体系列：“Verdana”，sans；
颜色：#fff；
文本对齐：居中；
}
@仅介质屏幕和（最大宽度：768px）{
正文{字体大小：16px；}
}
@仅介质屏幕和（最小宽度：769px）{
正文{字体大小：32px；}
}
ul li{列表样式类型：无；}
li{display:inline；}
a、 李阿{
文字装饰：无；
大纲：无；
颜色：#fff；
}
#菜单{
宽度：100vw；
高度：100vh；
显示：块；
位置：绝对位置；
排名：0；
左：0；
背景:#每一位;；
溢出：隐藏；
}
#子框{
最大宽度：0；
最大高度：0；
溢出：隐藏；
}
#子框，打开{
宽度：200px；
高度：200px；
显示：块；
位置：相对位置；
背景：灰色；
颜色：#fff；
}
.跳过{
剪辑：rect（0）；
保证金：-1px；
溢出：隐藏；
显示：无；
位置：绝对位置；
顶部：-1px；
左：-1px；
z指数：-1；
}

隐藏子菜单的css规则探索
带有一个子菜单的菜单

你很接近。您正在将

.open

类应用于

#子框

，因此请将选择器更改为

#子框.open

var sub=document.querySelector（“子框”），
subToggle=document.querySelector（“子菜单”）；
如果（小计）{
subToggle.addEventListener（“单击”，
职能（e）{
如果（子类名称==“打开”）{
sub.className=“”；
}否则{
sub.className=“打开”；
}
e、 预防默认值（）；
}，假）；
}

正文{
背景：#fff；
字体系列：“Verdana”，sans；
颜色：#fff；
文本对齐：居中；
}
@仅介质屏幕和（最大宽度：768px）{
身体{
字体大小：16px；
}
}
@仅介质屏幕和（最小宽度：769px）{
身体{
字体大小：32px；
}
}
ulli{
列表样式类型：无；
}
李{
显示：内联；
}
A.
李阿{
文字装饰：无；
大纲：无；
颜色：#fff；
}
#菜单{
宽度：100vw；
高度：100vh；
显示：块；
位置：绝对位置；
排名：0；
左：0；
背景:#每一位;；
溢出：隐藏；
}
#子框{
最大宽度：0；
最大高度：0；
溢出：隐藏；
}
#子框.打开{
宽度：200px；
高度：200px；
显示：块；
位置：相对位置；
背景：灰色；
颜色：#fff；
溢出：可见；
最大高度：100%；
最小高度：100%；
}
.跳过{
剪辑：rect（0）；
保证金：-1px；
溢出：隐藏；
显示：无；
位置：绝对位置；
顶部：-1px；
左：-1px；
z指数：-1；
}

隐藏子菜单的css规则探索
带有一个子菜单的菜单

我不知道代码中哪里有错误：在css规则或JS中（至少没有语法错误，可能我与QuerySelector混淆了），或者这只是样式问题。很抱歉出现这样的标题@isherwoodThank you@Michael Coker，在您的帮助下，我还发现了#subBox规则的问题。通过更正打开下一个：溢出：可见；最大高度：100%；最小高度：100%。