Javascript window.innerWidth（如果未触发）

当屏幕的大小小于500px时，我试图获得一个下拉菜单来显示。稍后，我将删除导航栏，以便此菜单在小型设备上替换它

代码在我看来很好，警报确实发出，但菜单没有显示

TLDR：当屏幕大小小于500px时，需要使菜单显示

JSFiddle：

代码：

var-dropDownFunction=function（）{
var menuContent=document.getElementById（“dropDownMenuClass”）；
menuContent.classList.toggle（“menuShow”）；
}
var windowWidth=window.innerWidth；
如果（窗宽<500）{
警报（“窗口太小”）；
var dropDownMenu=getElementById（“dropDownMenu”）；
下拉菜单.classList.toggle（“mainMenuShow”）；
}

#下拉菜单{
}
.下拉菜单玻璃{
显示：无；
}
梅努绍先生{
显示：块；
}
#下拉菜单内容{
}
.dropDownMenuContentClass{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
宽度：100%；
文本对齐：居中；
}
#下拉菜单内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
#下拉菜单内容a：悬停{
背景色：#f1f1；
}
#下拉按钮{
宽度：100%；
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
梅努肖先生{
显示：块；
}

菜单

始终检查控制台是否存在错误。例如，在Chrome中，您将看到

Uncaught ReferenceError: getElementById is not defined

应该是：

var dropDownMenu = document.getElementById("dropDownMenu");

---

更新的小提琴：

始终检查控制台是否有错误。例如，在Chrome中，您将看到

Uncaught ReferenceError: getElementById is not defined

应该是：

var dropDownMenu = document.getElementById("dropDownMenu");

---

更新的fiddle:

getElementByID

是

文档的一种方法

var dropDownMenu = document.getElementById("dropDownMenu");

getElementByID
是
document

var dropDownMenu = document.getElementById("dropDownMenu");

另一种方法是使用。另一种方法是使用。嘿，谢谢！我做了更改，即使它在小提琴中工作，我现在得到了这个错误：UncaughtTypeError:无法读取null的属性'classList'。我的班级名单有问题吗？嘿，谢谢！我做了更改，即使它在小提琴中工作，我现在得到了这个错误：UncaughtTypeError:无法读取null的属性'classList'。我的班级名单有问题吗？嘿，谢谢！我做了更改，即使它在小提琴中工作，我现在得到了这个错误：UncaughtTypeError:无法读取null的属性'classList'。类列表有问题吗？您需要确保脚本在加载文档后运行。否则，
下拉菜单
还不存在。将脚本放在文档末尾应该可以修复错误我在样式表中运行它，但我所做的是设置一个事件侦听器，在页面加载后启动脚本，从而解决了问题。你完全正确。万分感谢！嘿，谢谢！我做了更改，即使它在小提琴中工作，我现在得到了这个错误：UncaughtTypeError:无法读取null的属性'classList'。类列表有问题吗？您需要确保脚本在加载文档后运行。否则，
下拉菜单
还不存在。将脚本放在文档末尾应该可以修复错误我在样式表中运行它，但我所做的是设置一个事件侦听器，在页面加载后启动脚本，从而解决了问题。你完全正确。万分感谢！