Блог

возникла проблема с функцией jquery. У меня есть несколько событий изменения размера, которые сворачивают навигацию при определенной ширине. Отлично работает с рабочего стола, но на телефоне меню запускается, когда я начинаю прокручивать страницу вниз при загрузке первой страницы. Как только я закрываю его и снова прокручиваю страницу вниз, все в порядке. Не могу разобраться в этом. Любая помощь приветствуется..

 //---HIDE AND OPEN MENU ON BUTTON CLICK---//
$('#mobile_menu_btn').click(function () {
    $('nav ul').slideToggle('fast', function () {
        $(this).css('display') == 'none' ? $(this).removeClass('showNav').addClass('hideNav').removeAttr('style') : $(this).removeClass('hideNav').addClass('showNav').removeAttr('style');
    });
})

//---TRIGGER AUTOMATIC MENU BUTTON CLICK AT SPECIFIED PAGE WIDTH---//
window.addEventListener('resize', resize);
function resize() {
    if (window.innerWidth < 550) {
        jQuery(function () {
            jQuery('#mobile_menu_btn').click();
        });
        window.removeEventListener('resize', resize);
    }
}

//---TRIGGER AUTOMATIC MENU BUTTON CLICK AT SPECIFIED PAGE WIDTH ON PAGE LOAD ONLY ---//
if (window.innerWidth < 550) {
    jQuery(function () {
        jQuery('#mobile_menu_btn').click();
    });
}
  

JSFiddle