Javascript 制作移动导航条

我正在创建一个响应迅速的网站，所以我决定创建平板电脑和移动版，并希望像许多开发人员在创建小型设备导航栏（burger bar）时所做的那样。所以我可以使用javascript将类添加到html文件中，但在这之后，我需要一个小时的时间来处理一个问题。谢谢 在这里您可以看到代码：

document.querySelector（“按钮”）.addEventListener（“单击”，显示）；
函数show（）{
let list=document.querySelector（“ul”）；
if（list.className！=“隐藏”）{
list.className=“bar”；
}else if（list.className==“隐藏”）{
list.className-=“bar”；
list.className=“隐藏”；
}
}

标题按钮{
浮动：对；
利润率：25px 25px；
边界：无；
光标：指针；
}
标题按钮。fa栏{
字体大小：25px；
背景色：白色；
}
收割台img{
填充：25px 75px；
}
标题导航{
边缘顶部：25px；
左边距：75px；
}
巴里先生{
填充：30px0；
边框底部：1px#cececece实心；
宽度：85%；
}
.隐藏{
可见性：隐藏；
}

你好

CSS

• 在手机中，

  ul

  在默认情况下应该隐藏，当您单击时，您需要显示

• 在大型设备中，

  按钮不应存在

JS 在

classList

上有一个

开箱即用的
方法
toggle
来切换类。不需要有条件地检查

希望能有帮助☺☺


document.querySelector（“按钮”）.addEventListener（“单击”，显示）；
函数show（）{
let list=document.querySelector（“ul”）；
list.classList.toggle（“显示”）；
}
标题按钮{
浮动：对；
利润率：25px 25px；
边界：无；
光标：指针；
}
标题按钮。fa栏{
字体大小：25px；
背景色：白色；
}
收割台img{
填充：25px 75px；
}
标题导航{
边缘顶部：25px；
左边距：75px；
}
巴里先生{
填充：30px0；
边框底部：1px#cececece实心；
宽度：85%；
}
保险商实验室{
显示：无；
}
.表演{
显示：块；
}
@仅介质屏幕和（最小宽度：992px）{
保险商实验室{
显示：块；
}
钮扣{
显示：无；
}
}

显示/隐藏







CSS


在手机中，
ul
在默认情况下应该隐藏，当您单击时，您需要显示

在大型设备中，
按钮不应存在


JS
在
classList
上有一个
开箱即用的
方法
toggle
来切换类。不需要有条件地检查

希望能有帮助☺☺


document.querySelector（“按钮”）.addEventListener（“单击”，显示）；
函数show（）{
let list=document.querySelector（“ul”）；
list.classList.toggle（“显示”）；
}
标题按钮{
浮动：对；
利润率：25px 25px；
边界：无；
光标：指针；
}
标题按钮。fa栏{
字体大小：25px；
背景色：白色；
}
收割台img{
填充：25px 75px；
}
标题导航{
边缘顶部：25px；
左边距：75px；
}
巴里先生{
填充：30px0；
边框底部：1px#cececece实心；
宽度：85%；
}
保险商实验室{
显示：无；
}
.表演{
显示：块；
}
@仅介质屏幕和（最小宽度：992px）{
保险商实验室{
显示：块；
}
钮扣{
显示：无；
}
}

显示/隐藏







您的相关代码应该在您的问题中，而不是在外部资源中。外部演示是有用的，甚至可能是一种奖励，但它不能取代在问题中使用代码的需要。您的相关代码应该在您的问题中，而不是在外部资源中。外部演示是有用的，甚至可能是一种奖励，但它不能取代在问题中使用代码的需要。