Javascript 使用纯css从移动菜单切换到默认菜单

目前，我正在尝试创建一个导航栏，如果屏幕太小（响应/移动），它会自动切换到汉堡包菜单

$（文档）.ready（（）=>{
$（“#btn”）。单击（（）=>{
$（“#项”）.toggle（）；
});
});
#导航栏{
背景：红色；
}
#项目{
显示器：flex；
}
#btn{
显示：无；
}
@介质（最大宽度：300px）{
#项目{
显示：无；
}
#btn{
显示：块；
}
}

X
链接1
链接2
链接3
当使用
时，切换
（显示/隐藏）在更改显示类型内联时覆盖CSS规则，除非
！重要信息
在CSS中使用

而是切换一个类
。切换类
，并结合一个额外的CSS规则
#items.show

更新

堆栈片段


$（文档）.ready（（）=>{
$（“#btn”）。单击（（）=>{
$（“#项”）.toggleClass（'show'）；
});
});
#导航栏{
背景：红色；
}
#项目{
显示器：flex；
}
#btn{
显示：无；
}
/*临时工。更改为500，以便在调整大小时在snippet/Chrome中更好地工作*/
@介质（最大宽度：500px）{
#项目{
显示：无；
}
#btn{
显示：块；
}
}
#项目。显示{
显示器：flex；
}

X
链接1
链接2
链接3
？您已经为屏幕>300设置了
#btn{display:none}
。
toggle（）
隐藏元素，与任何CSS无关。这意味着您必须
.show（）
将它们重新显示出来。用纯CSS解决这个问题的一种方法是有两个独立的菜单，一个用于手机，一个用于台式机，并根据窗口的宽度显示/隐藏它们。不过，我不会太担心这个具体问题，因为人们通常不会在浏览网站时调整窗口大小。@ChrisG不，他们“通常不会在浏览时调整窗口大小”，但他们可能会在纵向/横向之间翻转手机，然后这就成了一个问题。