单击Javascript菜单

我有一个带有图像和隐藏导航条的div。当我点击div时，我希望它显示隐藏的菜单，但由于某些原因，它不起作用。理想情况下，我希望导航栏从右侧滑出，但现在我只希望它在我单击按钮时出现

使用显示隐藏菜单：无；我试图使用javascript.style重新应用它，但由于某些原因，它无法工作

我的代码

var menu=document.querySelectorAll（“.navigation mobile”）；
函数onMenuClick（）{
menu.style.display=“inline”；
}

。移动导航{
显示：无；
列表样式类型：无；
宽度：300px；
溢出：隐藏；
浮动：对；
位置：相对位置；
z指数：1；
背景色：#2a3b4d；
身高：100%；
顶部：-20px；
左侧填充：0；
}
.移动导航a:悬停{
文字装饰：无；
}
.移动导航元件{
字体系列：“Lato”，无衬线；
字体大小：16px；
填充：10px；
左侧填充：0；
垫底：20px；
填充顶部：20px；
边框底部：1px纯白；
左侧填充：10px；
}
a.移动导航要素{
显示：块；
颜色：#ffffff；
宽度：300px；
}
a.导航元素移动：悬停{
背景色：#243342；
}
.移动导航按钮{
显示：无；
位置：相对位置；
顶部：15px；
右：25px；
宽度：35px；
高度：35px；
浮动：对；
}
#菜单图标{
宽度：30px；
高度：30px；
}
.移动导航按钮：悬停{
光标：指针；
}
@媒体屏幕和屏幕（最大宽度：1040px）{
.导航{
显示：无；
}
.移动导航按钮{
显示：内联；
}
}

文档。querySelectorAll

返回所有匹配元素的节点列表。并且节点列表上没有任何

样式的属性。您需要的是
document.querySelector
，它将只返回第一个匹配的节点，您可以应用样式属性来隐藏、显示或执行任何操作

或者可以使用
document.querySelectorAll（
selector
）[0]
获取第一个选择器（如果需要）

如果你想添加滑动效果。使用
jquery
会很容易。只需将
menue.style.display=block
替换为
$（“.navigation mobile”）.slideDown（）
，就可以产生滑动效果


var menu=document.querySelector（“.navigation mobile”）；
函数onMenuClick（）{
menu.style.display=“block”；
}
。移动导航{
显示：无；
列表样式类型：无；
宽度：300px；
溢出：隐藏；
浮动：对；
位置：相对位置；
z指数：1；
背景色：#2a3b4d；
高度：300px；
顶部：-20px；
左侧填充：0；
}
.移动导航a:悬停{
文字装饰：无；
}
.移动导航元件{
字体系列：“Lato”，无衬线；
字体大小：16px；
填充：10px；
左侧填充：0；
垫底：20px；
填充顶部：20px；
边框底部：1px纯白；
左侧填充：10px；
}
a.移动导航要素{
显示：块；
颜色：#ffffff；
宽度：300px；
}
a.导航元素移动：悬停{
背景色：#243342；
}
.移动导航按钮{
显示：无；
位置：相对位置；
顶部：15px；
右：25px；
宽度：35px；
高度：35px；
浮动：对；
}
#菜单图标{
宽度：30px；
高度：30px；
}
.移动导航按钮：悬停{
光标：指针；
}
@媒体屏幕和屏幕（最大宽度：1040px）{
.导航{
显示：无；
}
.移动导航按钮{
显示：内联；
}
}



因为使用
document.querySelectorAll
您将获得该特定类的所有
元素。在函数中遍历所有这些选项，或者选择一个要更改其样式的特定选项。我更改了它并删除了all，但它仍然不工作。这可能是
高度的问题“
。例如，将“高度”更改为
300px
，您不能验证我添加的上述剪接吗？它在代码段中有效，但在我的代码中无效。不太清楚为什么