@ экран в JavaScript? - PullRequest
Новая
       34

@ экран в JavaScript?

1 голос
/ 30 марта 2019

Я закодировал этот скрипт.Если размер окна меньше 1000 пикселей, можно развернуть пункты меню.Но если вы свернете пункты меню и увеличите размер окна, пункты меню останутся скрытыми.Я не понимаю, как их затемнить.

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";
  }
}

1 Ответ

2 голосов
/ 30 марта 2019

Ваша проблема со специфичностью CSS (см. Специфичность ).Простое и быстрое решение для достижения вашей цели - инвертировать медиа-логику и применить к свойству важное значение для переопределения встроенного правила 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";, вы добавляете встроенный стиль, которыйимеет приоритет перед классами и стилями идентификаторов.Лучший способ сделать то, что вы хотите, - это создать разные классы (.folding-visible и т. Д.) И контролировать, какой класс будет применяться в зависимости от области просмотра.

...