Функция запуска jQuery над определенной шириной окна

У меня много проблем с некоторыми jQuery, которые я пытаюсь написать. Мне нужна одна функция, которая будет доступна все время, и одна функция будет доступна, когда окно пользователя больше заданной ширины. Вот мои функции, работающие в jQuery(document).ready(function($){

Функция для выпадающих меню должна выполняться только тогда, когда окно больше установленного значения;

//the dropdown code for desktop users
function largeDropDown(){
    $('#nav ul li').hover(
    //open
    function(){ $(this).find('ul').stop().slideDown(300); },
    //close
    function(){ $(this).find('ul').stop().slideUp(300); }
    );
}

И это доступно все время, хотя было бы неплохо узнать, как сделать это одним условием для размера экрана.

//the dropdown code for smaller screens
$('a.menu_trigger').click(openMenu);
function openMenu(e){
    e.preventDefault();
    if($(this).next('ul').hasClass('open_menu')){
        $(this).next('ul').slideUp(300).removeClass('open_menu');
        $(this).html("&darr;");
    } else {
        $(this).next('ul').slideDown(300).addClass('open_menu');
        $(this).html("&uarr;");
    }

}

При использовании запросов мультимедиа CSS a.menu_trigger скрывается, когда окно превышает 768 пикселей. Таким образом, jQuery ничего не сделает (по крайней мере, моя попытка заставить это работать!)

Итак, я хотел бы знать, как сделать первую функцию выше 768px, а также как вызвать эту функцию при изменении размера окна. Любая помощь будет замечательной! Благодарю.

Ответ 1

Вы можете связать события изменения размера окна, выполнив следующие действия:

$(window).on('resize', function(event){
    // Do stuff here
});

Вы можете получить размер окна, выполнив следующие действия:

var windowWidth = $(window).width();
if(windowWidth > 768){
    // Do stuff here
}

Вот jsfiddle, чтобы увидеть все это в действии.

Будьте осторожны с тем, что вы связываете в событиях изменения размера окна. Это может быть выполнено в десятки раз, когда пользователь естественным образом изменяет размер браузера. Тяжелый код приведет к плохой работе с пользователем.

Ответ 2

Это будет проверять размер окна каждый раз, когда вы выполняете функцию. Если окно меньше 768 пикселей, он будет двигаться вперед, открыв меню. Если он больше 768px, он ничего не сделает (перейдите Tigger!).

function openMenu(e){
    if ( $(window).width() < 768 ) {
        e.preventDefault();
        if($(this).next('ul').hasClass('open_menu')){
            $(this).next('ul').slideUp(300).removeClass('open_menu');
            $(this).html("&darr;");
        } else {
            $(this).next('ul').slideDown(300).addClass('open_menu');
            $(this).html("&uarr;");
        }
    } else {
        return false;
    }
}

РЕДАКТИРОВАТЬ: Требуется добавить микробиблиотеку, которую я использовал для выполнения кода при определенных ширинах видового экрана; он дает вам возможность использовать медиа-запросы в JavaScript. Я бы рекомендовал проверить enquire.js.

Ответ 3

Эта простая реализация позволит этому случиться только один раз. Тест будет изменен. Если уровень выше 1077 и один раз снизится до уровня. Ничего посередине. Вы можете удалить первое предупреждение ("тест"), поэтому оно будет происходить только сейчас. когда вы поднимаетесь выше 1077 и убираете вторую, чтобы...

var isAbove1077 = $(window).width() > 1077;
        $(window).on('resize', function(event){
            if( $(window).width() < 1077 && isAbove1077){
                isAbove1077 = false;
                alert('test');
            }else if($(window).width() > 1077 && !isAbove1077){
                isAbove1077 = true;
                alert('test');
            }
        });