基于w3学校教程的响应导航栏未使用javascript打开

考虑到html、css和js中的代码不到90行，这可能非常简单，但我不明白为什么它不起作用

它的格式基本上仍然正确，但是关键的问题是，单击按钮似乎没有运行javascript将类更改为响应类，或者如果确实如此，则响应类不起作用

这里有一个活生生的例子

HTML:

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

/*响应导航条的样式*/
.topnav.icon{
显示：无；/*隐藏应在小屏幕上打开和关闭topnav的链接*/
}
@媒体屏幕和屏幕（最大宽度：959px）{
/*向顶部导航添加黑色背景色*/
托普纳夫先生{
背景色：#333；
溢出：隐藏；
}
托普纳夫{
列表样式类型：无；
边际上限：0px；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*更改悬停时链接的颜色*/
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
}
/*当屏幕宽度小于959像素时，隐藏除第一个（“主页”）外的所有链接。显示包含打开和关闭topnav（.icon）的链接*/
@媒体屏幕和屏幕（最大宽度：959px）{
.topnav li:not（：第一个子项）{display:none；}
.topnav li.icon{
浮动：对；
显示：块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。该类使topnav在小屏幕上看起来不错（垂直显示链接，而不是水平显示链接）*/
@媒体屏幕和屏幕（最大宽度：959px）{
.topnav.responsive{位置：相对；}
.topnav.li.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.li{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.lia{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}

响应式Topnav示例
调整浏览器窗口的大小以查看其工作方式

如果其他任何人有相同的问题，则是由于缺少div标记引起的

<div id="nav-container">
<div class="topnav" id="myTopnav">

只是一些更改

首先，在JSFIDLE中，您需要将JavaScript设置加载类型更改为

No wrap-in

关于为什么需要在JSFIDLE中执行此操作

---

然后请注意，您正在查询一个不存在的id

myTopnav

相反，您可以查询现有的

topnav

类，如下所示：

var x=document.querySelector（“.topnav”）；

---

请尝试以下代码段：

函数myFunction（）{
var x=document.querySelector（“.topnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

/*响应导航条的样式*/
.topnav.icon{
显示：无；
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
}
@媒体屏幕和屏幕（最大宽度：959px）{
/*向顶部导航添加黑色背景色*/
托普纳夫先生{
背景色：#333；
溢出：隐藏；
}
托普纳夫{
列表样式类型：无；
边际上限：0px；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*更改悬停时链接的颜色*/
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
}
/*当屏幕宽度小于959像素时，隐藏除第一个（“主页”）外的所有链接。显示包含打开和关闭topnav（.icon）的链接*/
@媒体屏幕和屏幕（最大宽度：959px）{
.topnav li:不是（第一个孩子）{
显示：无；
}
.topnav li.icon{
浮动：对；
显示：块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。该类使topnav在小屏幕上看起来不错（垂直显示链接，而不是水平显示链接）*/
@媒体屏幕和屏幕（最大宽度：959px）{
.topnav{
位置：相对位置；
}
.topnav.li.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.li{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.lia{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}

响应式Topnav示例
调整浏览器窗口的大小以查看其工作方式

您使用了

myTopnav

来获取elementbyid，但是在您的代码中没有这个。使用

nav容器


函数myFunction（）{
var x=document.getElementById（“导航容器”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
/*响应导航条的样式*/
.topnav.icon{
显示：无；/*隐藏应在小屏幕上打开和关闭topnav的链接*/
}
@媒体屏幕和屏幕（最大宽度：959px）{
/*向顶部导航添加黑色背景色*/
托普纳夫先生{
背景色：#333；
溢出：隐藏；
}
托普纳夫{
列表样式类型：无；
边际上限：0px；
}
/*设置navigati中链接的样式