применить JQuery на определенном разрешении

Question

Я использую JQuery для меню мобильного Hamburger:

jQuery(function($) { 'use strict;

$('<div id="header-mobile-menu">&#x2261; <div class="mH"></div></div>').insertBefore('nav.nav-header ul.genesis-nav-menu'); 

$('nav.nav-header ul.genesis-nav-menu').addClass('hide'); 

$('#header-mobile-menu').on('click', function() { 
    $('nav.nav-header ul.genesis-nav-menu').slideToggle(); 
    $(this).toggleClass('active'); 
}); 

}); Проблема заключается в том, что меню не закрывается сама после щелкнули. Поэтому я добавил следующее:

$('.menu-item').on('click', function() { 
    $('nav.nav-header ul.genesis-nav-menu').slideToggle(); 
    $('#header-mobile-menu').toggleClass('hide'); 

Но теперь его можно использовать для всех разрешений. И это не хорошо. Поэтому я попытался изменить его с этим:

if($(window).width() < 992){} 

И окончательный вид будет:

jQuery(function($) { 'use strict';

// Insert mobile menu before the Genesis Header Right widget navigation menu 
$('<div id="header-mobile-menu">&#x2261; <div class="mH"></div></div>').insertBefore('nav.nav-header ul.genesis-nav-menu'); 

// Add .hide class to .nav-header .genesis-nav-menu to hide it for small screen sizes 
$('nav.nav-header ul.genesis-nav-menu').addClass('hide'); 

// Toggle Header Right widget navigation menu for mobile menu 
$('#header-mobile-menu').on('click', function() { 
    $('nav.nav-header ul.genesis-nav-menu').slideToggle(); 
    $(this).toggleClass('active'); 
}); 

    if($(window).width() < 992){ 
// Hide Header Right widget navigation menu for mobile menu if clicked 
    $('.menu-item').on('click', function() { 
    $('nav.nav-header ul.genesis-nav-menu').slideToggle(); 
    $('#header-mobile-menu').toggleClass('hide'); 
})}; 

});

и он не работает ... Пожалуйста, помогите кто знает синтаксис JQuery.

Answer 1

Если вы хотите, нажмите обработчик только выполнить, когда ширина окна является < +992, проверьте внутри обработчика:

// Hide Header Right widget navigation menu for mobile menu if clicked 
$('.menu-item').on('click', function() { 
    if($(window).width() < 992){ 
     $('nav.nav-header ul.genesis-nav-menu').slideToggle(); 
     $('#header-mobile-menu').toggleClass('hide'); 
    } 
});