1

Доброго времени суток.

Никак не получается удалить и восстановить блок в зависимости от разрешения экрана. Задача: сделать так, чтобы блок .h-about-mobile удалялся при разрешении экрана больше 768px и восстанавливался при разрешении равном 768px или меньше.

Пробовал вот такой код, где .for-mobile был родительским блоком:

$(document).ready(function() {
  var $hideBlock = $('.h-about-mobile');
  var $contentWrap = $('.for-mobile');

  function mobileNav() {
    var $mobileWidth = $(window).width();
    if ($mobileWidth > 768) {
      $hideBlock.detach();
    } else {
      $contentWrap.append($hideBlock);
    }
  }
  mobileNav();
$(document).ready(function() {
  mobileNav();
});

$(window).resize(function() {
  mobileNav();
});
});

Также пробовал вот так попроще:

var elem = $('.h-about-mobile');
var $mobileWidth = $(window).width();
if ($mobileWidth > 768) {
elem.detach();
} else {
elem.appendTo('body');

Не работает, блок так и остаётся на месте. Подскажите, что поправить в коде? Каков будет рабочий вариант?

1

2 ответа 2

3

а вы попробуйте переменные без $ называть - у нас тут все таки javascript, а не php ;-)

$(document).ready(function() {
  let hideBlock = $('.h-about-mobile');
  let contentWrap = $('.for-mobile');

  function mobileNav() {
    let mobileWidth = $(window).width();
    if (mobileWidth > 768) {
      hideBlock.detach();
    } else {
      contentWrap.append(hideBlock);
    }
  }
  mobileNav();

  $(window).resize(function() {
    mobileNav();
  });
});
.h-about-mobile {
  width:    50px;
  height:   50px;
  
  background: orange;
}

.for-mobile {
  width:    200px;
  height:   100px;
  
  border:   1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class = 'for-mobile'><div class = 'h-about-mobile'></div></div>

P.S.

на данном сайте эффекта не будет видно - потому что окно меньшего размера (меньше 768)

5
  • а вы попробуйте переменные без $ называть что это изменит?
    – InDevX
    6 дек 2020 в 7:44
  • @Zhihar доллар , к сожалению, никак не влияет на работу скрипта. Хотя (мало ли, может я тупой) я попробовал, всё же. Нет, не работает) 6 дек 2020 в 7:56
  • почему у меня работает? на данном сайте не работает, потому что пример выводится в меньшего размера окне (у меня 600+ пикселей), а ваша функция $(window).width() получает все таки не размер экрана монитора, если вы запустите мой код в редакторе на данном сайте и уменьшите размер окна (например войдете в режим отладки по F12) - то все будет работать - блок то будет появляться то будет уменьшаться
    – Zhihar
    6 дек 2020 в 8:07
  • @Zhihar Тут что-то реально не работает, но в кодпэн перенёс, заработало. Спасибо. 6 дек 2020 в 8:18
  • тогда проверьте - может у вас еще дополнительно что-то вызывает сбои, тут то совсем маленький пример
    – Zhihar
    6 дек 2020 в 8:23
0

Или на CSS

.block {
  border: 2px solid red;
  margin: 10px;
}

.less767 {
  display: none;
}

@media (max-width: 767px) { /** Когда экран меньше 767 px, применить эти стили **/
  .more767 {
    display: none;
  }
  
  .less767 {
    display: block;
    border-color: orange;
  }
}
<div class="less767 block">
  Экран меньше < 767
</div>

<div class="more767 block">
  Экран больше > 767
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.