Функция деления на размеры экрана
У меня есть следующий код, который влияет на мою навигацию
let opened = false; // set the nav as closed by default
function toggleNav() {
if (!opened) { // if opened is false (ie nav is closed), open the nav
openNav()
} else { // else, if opened is true (ie nav is open), close the nav
closeNav();
}
opened = !opened; // negate boolean to get opposite (t to f, and f to t)
}
function openNav() {
$('#myTopnav').addClass('openHeight').removeClass('closeHeight');
$('#main').addClass('openMain').removeClass('closeMain');
}
function closeNav() {
$('#myTopnav').removeClass('openHeight').addClass('closeHeight');
$('#main').removeClass('openMain').addClass('closeMain');
}
Я хочу, чтобы функции openNav и closeNav влияли на размеры экрана меньше 720 пикселей, я хочу иметь другую функцию openNav и closeNav для экранов большего размера. Я не уверен, как применить оператор if и else для достижения этой цели.
Обновлено: прошу прощения, это сайт Wordpress, поэтому я не был уверен, будет ли php частью предлагаемого решения.
Какова структура вашего HTML? Чего вы ожидаете, что не происходит?
Я бы использовал ту же функциональность, чтобы воздействовать на одни и те же имена классов на основе @media screen and (max-width: 720px){ /* small screen CSS override here */ }, что было бы CSS для маленьких экранов, чтобы переопределить CSS, который идет до @media.
Вы пытаетесь решить проблему с CSS, добавляя к ней немного JS. Хорошие новости: уже есть CSS-решение той самой CSS-проблемы. Называется media queries. smashingmagazine.com/2010/07/…
причина, по которой я не могу просто использовать медиа-запросы, заключается в том, что мне нужно добавлять и удалять классы/стили для разных размеров экрана в зависимости от кликов, местоположения мыши и т. д. Навигация может открываться и закрываться несколько раз на разных размерах экрана. Медиа-запросы должны быть включены в функцию
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать функцию изменения размера окна как:
$(window).resize(function(){
if ($(this).width() >= 1280) {
//Your Code Here
}
});
Вышеупомянутая функция будет работать, когда размер вашего окна составляет >= 1200.
В вашем сценарии это будет выглядеть так:
//For Example You want to toggle your nav here
if ($(window).width() > 720) {
toggleNav2(); //Which you have created for less than 720px screen
}else{
toggleNav1(); //Which you have created for larger than 720px screen
}
могу ли я просто обернуть каждый openNav/closeNav в это или есть способ обернуть их оба в один?
Как это вопрос о PHP?