Question

我编写了此脚本。如果窗口大小小于1000px，则可以展开菜单点。但是，如果折叠菜单点并增加窗口大小，则菜单点仍保持隐藏状态。我不希望它再次褪色。

HTML：

< br/ >

CSS：

{% if user.userprofileinfo.is_verifieduser %}

JS：

<!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>

Answer 1

您的问题在于CSS的特异性（请参见Specificity）。实现目标的一种简单而快速的解决方案是反转媒体逻辑，并对属性应用重要的属性以覆盖内联规则display:none;：

.button {
  display: block;
}
#folding {
  display: none;
}

@media screen and (min-width: 1000px) {
 #folding {
  display: block !important;
 }
 .button {
  display: none;
 }
}

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

JavaScript中的@media屏幕？

1 个答案: