@ahahahaha2312

Как правильно сделать адаптивность в данном случае?

Доброго дня!
У меня есть следующая разметка (классы не писал):

<div id="main_block">
<div id="first_block" onclick="goClick('first');">Один</div>
<div id="second_block" onclick="goClick('second');">Два</div>
<div id="third_block" onclick="goClick('third');">Три</div>
</div>

<div id="main_block_mobile">
<div id="first_block" onclick="goClick('first');">Один</div>
<div id="second_block" onclick="goClick('second');">Два</div>
<div id="third_block" onclick="goClick('third');">Три</div>
</div>


Стили:

#main_block {
display: block;
}
#main_block_mobile {
display: none;
}

@media (max-width: 1000px) {
#main_block {
display: none;
}
#main_block_mobile {
display: block;
}
}


И функция:

function goClick(name) {
document.getElementById(name).style.display = "none";
}


Как правильно сделать адаптивность в данном случае?
Js будет видеть, что на странице два элемента с одним айди, можно ли как-то скрывать другой блок в зависимости от размеров дисплея? При том нужно, чтобы работало без обновления страницы (то есть адаптивность будет работать, если мы будем изменять размеры окна).
  • Вопрос задан
  • 129 просмотров
Пригласить эксперта
Ответы на вопрос 2
Devilz_1
@Devilz_1
Frontend-Developer
Если объект скрывать/показывать ничего не изменится, id будет дублирован в DOM дереве и это неправильно. Просто присвойте обоим элементам классы, которые скроют блоки и присваивайте id со стилями видимости тому элементу, которому нужно.

Как вариант, добавляете слушатель ресайза страницы
window.addEventListener('resize', function(event) {
   if (event.currentTarget.innerWidth < 768) {
      // показать один блок, присвоив ему класс для отображения
   } else {
      // показать другой блок, присвоив ему класс для отображения
   }
}, true);


Но как бы это и с помощью CSS сделать можно, воспользовавшись медиазапросом
@media(max-width: 768px) // будут применены стили если ширина экрана не больше 768px

Подробнее тут
Ответ написан
alaskafx
@alaskafx
Не .do Frontend
можно ли как-то скрывать другой блок в зависимости от размеров дисплея


Да.
@media screen and (max-width: 220px){ //.. где 220 — это какая-то ширина экрана
// ...код
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы