gpt4 book ai didi

javascript - @media 屏幕在 JavaScript 中?

转载 作者:行者123 更新时间:2023-11-30 14:05:43 25 4
gpt4 key购买 nike

我编写了这个脚本。如果窗口尺寸小于1000px,则可以展开菜单点。但是,如果折叠菜单点并增加窗口大小,菜单点仍会隐藏。我不明白它会再次淡入淡出。

HTML:

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

CSS:

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

JS:

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

最佳答案

您的问题与 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 等)并根据视口(viewport)控制将应用哪个类。

关于javascript - @media 屏幕在 JavaScript 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55432746/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com