Удалить и восстановить блок div через jquery

Question

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

Никак не получается удалить и восстановить блок в зависимости от разрешения экрана. Задача: сделать так, чтобы блок .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');

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

Answer 1

а вы попробуйте переменные без $ называть - у нас тут все таки 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)

Answer 2

Или на 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>

БЛОГ НА HUSL

Удалить и восстановить блок div через jquery

Ответы (2 шт):