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