jQuery и адаптивность
Задача следующая:
Есть макет, в своём первоначальном виде, имеет боковую менюшку. В адаптиве эта менюшка через медиа запрос прячется путём получения left: -192px. В этом же запросе появляется две кнопки для открытия и закрытия менюшки. Скрипт:
/* Открытие меню */
$('.nav-toggle').click(function() {
$('.sidebar').animate({
left: '0'
}, 200);
});
/* Закрытие меню */
$('.nav-toggle2').click(function() {
$('.sidebar').animate({
left: '-192px'
}, 200);
});
Всё работает... НО при масштабировании к первоначальной версии, свойства остаются, т.е. если я в адаптиве скрыл менюшку, а потом отскролил экран, она останется скрытой... Я понял что применяются инлайновые стили, в связи с этим у меня вопрос, как реализовать данный функционал таким образом, чтобы макет работал так как задуманно главным файлом стилей? Может как то заставить работать скрипты при определённом разрешении, а при его изменении определённые стили сбрасывались? Другими словами - как мне подружить адаптив с jquery? |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.sidebar{
position: relative;
width: 100px;
height: 100px;
background-color: red;
left: 0;
transition: 1s;
}
@media only screen and (max-width:800px) {
.sidebar{
left: -192px;
}
}
</style>
</head>
<body>
<div class="sidebar"></div>
</body>
</html>
в чем сложность? |
Цитата:
Вы написали код который демонстрирует работу медиа запросов, я знаю как работают медиа запросы, у меня другой вопрос. |
Цитата:
window.matchMedia('(max-width: 600px)').addListener(e=>{
if (e.matches) alert();
});
может есть медиа события есть события resize. |
Цитата:
|
Всё супер!!!
Да действительно заработало!)
Вот что получилось в итоге:
var handleMatchMedia = function(mediaQuery) {
if (mediaQuery.matches) {
/* При ширине меньше чем 768px скрипт прячет менюшку */
$('.sidebar').css('left','-192px')
/* Открытие меню кнопкой*/
$('.nav-toggle').click(function() {
$('.sidebar').animate({
left: '0'
}, 200);
});
/* Закрытие меню другой кнопкой*/
$('.nav-toggle2').click(function() {
$('.sidebar').animate({
left: '-192px'
}, 200);
});
/* При ширине выше чем 768px менюшка отображается */
} else {
$('.sidebar').css('left','0')
}
},
mql = window.matchMedia('all and (max-width: 768px)');
handleMatchMedia(mql);
mql.addListener(handleMatchMedia);
У меня возник другой вопрос, появилась необходимость сделать выборку элемента таким образом, чтобы взять дочерний элемент предыдущего соседа... Мне на ум пришла строчка $(this).prev().$('.class') Но консоль выдаёт кучу ошибок на неё, как быть?) |
Цитата:
$(this).prev().children('.class')
|
УРААААА!!!
Заработало! Спасибо тебе, мудрый человек :dance: |
| Часовой пояс GMT +3, время: 16:13. |