Fatal编程技术网

@JavaScript中的媒体屏幕？

javascript css mobile

@JavaScript中的媒体屏幕？,javascript,css,mobile,media-queries,screen,Javascript,Css,Mobile,Media Queries,Screen,我编写了这个脚本。如果窗口大小小于1000px，则可以展开菜单点。 但是，如果折叠菜单点并增大窗口大小，菜单点仍然保持隐藏状态。我不想让它们再次消失 HTML: JS: 您的问题在于css的特殊性（请参阅）。 要实现您的目标，一个简单而快速（不是很好）的解决方案是反转媒体逻辑并应用重要属性来覆盖内联规则display:none： 。按钮{ 显示：块； } #折叠{ 显示：无； } @媒体屏幕和屏幕（最小宽度：1000px）{ #折叠{ 显示：块！重要； } .按钮{ 显示：无； } } 当您执

我编写了这个脚本。如果窗口大小小于1000px，则可以展开菜单点。 但是，如果折叠菜单点并增大窗口大小，菜单点仍然保持隐藏状态。我不想让它们再次消失

HTML:

JS:

您的问题在于css的特殊性（请参阅）。 要实现您的目标，一个简单而快速（不是很好）的解决方案是反转媒体逻辑并应用重要属性来覆盖内联规则
display:none：


。按钮{
显示：块；
}
#折叠{
显示：无；
}
@媒体屏幕和屏幕（最小宽度：1000px）{
#折叠{
显示：块！重要；
}
.按钮{
显示：无；
}
}


当您执行
x.style.display=“无”时添加的内联样式优先于类和id样式。执行所需操作的最佳方法是创建不同的类（.folding visible等…），并根据视口控制应用哪个类


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<nav>
<h2>S U P E R</h2>
<button class="button" onclick="fold()">FOLD</button>
<div id="folding">
<a>Under Construction 1</a><br>
<a>Under Construction 2</a><br>
<a>Under Construction 3</a><br>
<a>Under Construction 4</a><br>
</div>
</nav>
</body>
</html>



#folding {
display: block;
}
.button {
display: none;
}
@media screen and (max-width: 1000px) {
.button {
display: block;
} 
#folding {
display: none;
}
body {
background-color: red;
}
}



function fold() {
  var x = document.getElementById("folding");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}