如何用JavaScript实现汉堡菜单点击切换显示隐藏功能

问题原因 #

• 变量拼写错误：声明按钮变量为btn，绑定事件时错写为bnt，导致点击事件绑定失败，点击按钮没有任何反应。
• 事件回调逻辑错误：addEventListener第二个参数需要传入函数引用，写show()会在代码加载时立刻执行show函数，页面加载完成就自动给侧边栏加上了open类，所以菜单会直接显示。
• CSS优先级问题：.side-bar和.open都是单类选择器，权重相同，.side-bar的display:none定义在前，部分场景下单独的.open无法覆盖该样式，导致加了类也不生效。
• 样式作用域限制：.open样式写在max-width:800px的媒体查询内，只有视口宽度小于800px时该样式才会生效，宽屏状态下切换无效。

修复方法 #

1. 修正JS中的变量拼写错误
2. 绑定事件时去掉show后的括号，只传入函数名
3. 调整CSS选择器为.side-bar.open提高优先级，可根据需求决定是否将该样式移出媒体查询。

修复后代码 #

JavaScript代码 #

let btn = document.getElementById('btn-js');
let sidebar = document.getElementById('side-bar');

btn.addEventListener('click', show);

function show(){
    sidebar.classList.toggle('open');
}

CSS代码 #

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    list-style: none;
}

.side-bar{
    display: none;
    background: cornflowerblue;
    width: 275px;
    text-align: center;
    font-size: 19px;
}

/* 提高选择器优先级，确保能覆盖原有display属性 */
.side-bar.open{
    display: block;
}

.side-links{
    padding: 30px 0;
}

.side-links li{
    padding: 30px 0;
}

/* 如果仅需要在宽度小于800px时支持菜单切换，就把.open样式放在这里，否则放在外面全局生效 */
@media all and (max-width:800px) {
    /* 响应式下的其他样式可以写在这里 */
}

HTML代码无需修改。

内容的提问来源于stack exchange，提问作者Ayman Busaba