我正在尝试使用列表＆javascript和@media创建一个响应式导航栏。当我将浏览器的大小调整为〜700px时，列表样式的项目为“显示：无”，并出现汉堡菜单。如果我没有单击汉堡菜单，则当我将浏览器调整为正常大小时，列表仍会显示内联块，但是当我单击汉堡菜单以在“列表项”中显示菜单项时，我仍会得到列表-项目显示类型，当我将浏览器调整为正常大小时。
我想念什么吗？
function myFunction3() {
x = document.getElementsByClassName("li-tag");
if (x[0].style.display === 'none'){
for (index = 0; index<x.length; index++)
{
x[index].style.display = 'list-item';
}
} else {
for (index = 0; index<x.length; index++)
{
x[index].style.display = 'none';
}
}
}
我的@Media
@media (max-width: 700px){
.toggle-button{
display:block;
}
.li-tag {
display:none;
}
}
导航栏的CSS：
.tags{
background: #0000cc;
color:white;
font-family: 'Alata', sans-serif;
width: 100%;
text-align: center;
}
.ul-tag {
list-style-type:none;
width: 70%;
margin:auto;
text-align: center;
}
.li-tag {
display:inline-block;
font-family: 'Alata', sans-serif;
font-size:25px;
margin-right: 10px;
}
HTML代码：
<div class ="tags" >
<a href="#" class ="toggle-button" onclick = "myFunction3()">☰</a>
<ul class = "ul-tag">
<li class = "li-tag "><a href="#home">Home</a></li>
<li class = "li-tag "><a href="#news">Type 1</a></li>
<li class = "li-tag"><a href="#contact">Type 2</a></li>
<li class = "li-tag "><a href="#about">Type 3</a></li>
<li class = "li-tag "><a href="#about">Type 4</a></li>
<li class = "li-tag "><a href="#about">Type 4</a></li>
<li class = "li-tag "><a href="#about">Type 4</a></li>
<li class = "li-tag "><a href="#about">Type 4</a></li>
<li class = "li-tag "><a href="#about">Type 4</a></li>
</div>
我的密码
任何输入表示赞赏！
使用js应用的Css是一个内联规则，其优先级高于文件中的css规则，因此当您list-item使用js进行设置时，您的inline-block规则将不再起作用。我建议在js中为您的项目添加一个类，并在该类中添加控件display属性。
JS：
function myFunction3() {
var x = document.getElementsByClassName("li-tag");
for (index = 0; index<x.length; index++)
{
x[index].classList.toggle('list_view');
}
}
CSS：
@media (max-width: 700px){
.toggle-button{
display:block;
}
.li-tag {
display:none;
}
/* new */
.li-tag.list_view{
display: list-item;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句