Javascript 如何在点击汉堡时显示导航

我最近开始为我的计算机科学课程制作一个小网站，但我遇到了一个问题。一切都进展顺利。我想使用flexbox和媒体查询，所以我这样做了，但我还想添加一个汉堡菜单。我试着用JavaScript编写，但它不能正常工作，事实上，它不能工作。有谁能帮助我，告诉我哪里出了问题吗？此外，你可以告诉我，如果我可以做它只使用CSS，如果这将是一个很好的解决方案？谢谢大家的回复

函数myFunction（）{
var x=document.getElementsByClassName（“ham”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

*{
保证金：0；
填充：0；
}
身体{
背景：白色；
字体系列：“流沙”，无衬线；
}
.导航{
显示器：flex；
背景：红色；
盒影：1px 1px 100px黑色；
柔性包装：包装；
对齐内容：柔性端；
}
李海军：第一个孩子{
右边距：自动；
}
.导航a{
显示：块；
颜色：#fff；
文字装饰：无；
利润率：10px；
填充：20px；
过渡：1.3s；
}
.艺术{
填充顶部：30px；
字体大小：25px；
}
.img{
宽度：100%；
边框：黑色实心1px；
}
李娜：悬停{
过渡：1.3s；
颜色：黄色；
}
.标志{
背景：#000；
显示：块；
颜色：#fff；
文字装饰：无；
}
导航ul{
列表样式类型：无；
}
.第一节第条{
边缘顶部：100px；
边缘底部：100px；
}
.第一节h2{
填充：20px；
利润率：25px；
}
.第一节{
最大宽度：1000px；
保证金：0自动；
}
.第一节第p条{
文本对齐：对齐；
}
.媒体{
宽度：100%；
利润率：100px0；
}
.阅读更多：悬停{
颜色：深蓝色；
}
.阅读更多{
字体系列：“流沙”，无衬线；
字体大小：20px；
边界：0px；
背景：白色；
显示：块；
}
.多读一点{
文字装饰：无；
}
.媒体，家长{
显示器：flex；
柔性包装：包装；
}
.媒体.儿童{
弹性：1；
宽度：100%；
保证金：0自动；
高度：200px；
文本对齐：居中；
垂直对齐：中间对齐；
}
/*汉堡包*/
艾尔司{
宽度：40px；
位置：绝对位置；
右：1em；
顶部：1米；
}
.汉堡包{
显示：无；
宽度：40px；
高度：35px；
边界：0；
边框顶部：5px实心#ffffff；
背景：透明；
位置：相对位置；
过渡：0.3s变换线性；
}
汉堡包：以前，
.汉堡包{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
边框顶部：5px实心#ffffff；
变换：translateY（10px）；
}
.汉堡包{
变换：translateY（25px）；
过渡：0.3s变换线性；
}
.汉堡：聚焦{
变换：旋转（45度）translateY（5px）；
边界：无；
}
汉堡包：焦点：：之后{
变换：旋转（-90度）translateX（-10px）；
}
页脚{
宽度：100%；
文本对齐：居中；
底部：0；
背景：灰色；
}
.fb{
背景：url（facebook.png）无重复顶部；
身高：100%；
}
.tw{
背景：url（twitter.png）无重复顶部；
身高：100%；
}
.gplus{
背景：url（googleplus.png）无重复顶部；
身高：100%；
}
@仅介质屏幕和（最大宽度：600px）{
.导航{
文本对齐：居中；
弯曲方向：立柱；
}
.汉堡包{
显示：块；
}
.家长{
文本对齐：居中；
弯曲方向：立柱；
}
.第一节{
利润率：15px；
}
.艺术{
字体大小：15px；
}
哈姆先生{
显示：块；
}
.汉堡包{
显示：块；
}
纽扣。汉堡包：聚焦力。火腿{
显示：块；
}
}
@仅介质屏幕和（最大宽度：1050px）{
.第一节{
利润率：15px；
}
}

库巴千米雅克
2018年

你很接近。。。 我做了一些改变，比如添加了谷歌材料字体，我把汉堡放在了右上角。你应该把它放在更好的地方

当你点击它时，它后面跟着一个函数，上面写着“耶稣汉堡包”。在现实生活中，你可能更愿意做一些事情，比如让菜单滑入滑出

//this function should be replaced with some actual menu show/hide logic. 
function myFunction(){
  alert("jesus f hamburger");
}

我还建议使用一个框架为您修复这类东西。也许引导会起作用

你很接近。。。 我做了一些改变，比如添加了谷歌材料字体，我把汉堡放在了右上角。你应该把它放在更好的地方

当你点击它时，它后面跟着一个函数，上面写着“耶稣汉堡包”。在现实生活中，你可能更愿意做一些事情，比如让菜单滑入滑出

//this function should be replaced with some actual menu show/hide logic. 
function myFunction(){
  alert("jesus f hamburger");
}

我还建议使用一个框架为您修复这类东西。也许引导会起作用