Сделайте jQuery .show (), чтобы назначить отображение на основе Media Query

Согласно документации jQuery эффект .hide () сохраняет отображаемое значение элемента, чтобы восстановить его при вызове .show ().

Соответствующие элементы будут немедленно скрыты без анимации. Это примерно эквивалентно вызову .css («display», «none»), за исключением того, что значение свойства отображения сохраняется в кеше данных jQuery, чтобы впоследствии его можно было восстановить до его начального значения. Если элемент имеет отображаемое значение inline и скрыт, а затем отображается, он снова будет отображаться в строке.

Тем не менее, у меня есть элемент UL для навигации, display:flex;когда ширина экрана составляет> 768 и display:block;отображается на экранах до 768. Итак, если вы находитесь на iPad вертикально, откройте и закройте навигацию, затем поверните в горизонтальное положение, навигацию, которая должна быть display:flex;сейчасdisplay:block;

BTW Я использую jquery.slimmenu.js из @adnantopal. Я попытался переопределить его, добавив в .css('display:flex');зависимости от $(window).width()того, преобладают ли команды Slimmenu.

javascript,jquery,css,

1

Ответов: 1

1 принят

Javascript:

Javascript эквивалент CSS @media queriesявляется window.matchMedia:

var minWidth768px = window.matchMedia("(min-width:768px)");

if (minWidth768px.matches) {
    ....CODE HERE...
    }

JQuery:

Ближайший эквивалент jQuery $(window).width().

Но ... вам нужно знать, что $(window).width()сама по себе также будет включать ширину полосы прокрутки в правой части окна.

Поэтому вам нужно сделать что-то вроде этого:

$('body, html').css('overflow', 'hidden');
var windowWidth = $(window).width();
$('body, html').css('overflow', 'auto');

Затем вы можете продолжить работу в jQuery с помощью:

if (windowWidth > 767)  {
        ....CODE HERE...
        }
JavaScript, JQuery, CSS,
Похожие вопросы
Яндекс.Метрика