jQuery를 사용하여 창에서 요소를 표시하거나 숨기기

Question

jQuery에서 더 커지고 창 크기가 750px보다 작을 때 햄버거 메뉴를 만들려고 노력하며 어떻게 작동하는지 작동합니다. 문제는 창 크기를 750px 이상으로 조정하면 햄버거가 다시 일반 메뉴로 변경되지 않는다는 것입니다. 나는 $ (윈도우) .resize를 시도했지만, 내가 원하는 것을하지 않는다.

내 jQuery를 코드 $ (문서) .ready (함수() { VAR 폭 = $ (창) .width();

if (width <= 750) {   
    //Variables 
    var ham = $('.hamburger'); 
    var nav = $('nav') 

    //Hamburger Function 
    ham.show(); 
    ham.click(function() { 
     $('.menu').toggle(); 
    }); 

    //Navigation Menu Function 
    nav.hide();  

} else { 
    $('p').append('Bigger than 750'); 
} 

});

http://jsfiddle.net/IrvinBurciaga/0vn00oLh/

Answer 1

$ (창) .resize 올바른 기능을해야하지만, 당신은 또한

//initialize the hamburger menu once on ready 
$(document).ready(function() { 
    var ham = $('.hamburger'); 

    //Hamburger Function 
    ham.show(); 
    ham.click(function() { 
     $('.menu').toggle(); 
    }); 

    //call the checkWindowWith by yourself on ready 
    checkWindowWidth(); 
}); 

//register the resize function 
$(window).resize(checkWindowWidth); 

function checkWindowWidth() { 
    var width = $(window).width(); 

    if (width <= 750) { 
     $('.hamburger').show(); 
     $('.nav').hide();   
    } else { 
     $('.hamburger').hide(); 
     $('nav').show(); 
    } 
} 

jsfiddle demo