브라우저 크기 조정시 사이드 메뉴 숨기기

Question

사용자가 "목차"링크를 클릭하면 사이드 메뉴로 나타납니다. 브라우저가 1448px 아래로 크기가 조정되면 사이드 메뉴가 fadeOut()을 수행합니다.

그래서, 후에는

는

어떻게 사이드 메뉴)를 fadeIn (자동으로 다시 얻을 수 ... 다음 1448px 이상 크기 조정, 1448px 아래의 브라우저의 크기를 조정은 "목차를"링크를 클릭 한?

var button = $("a#contents_link"); // the TOC link 
    var toc = $('#table-of-contents'); // the TOC div to show 
    var browser = $(window);   // getting the browser width 


    toc.hide();       // hide the TOC div upon loading the page 

    button.click(function (event) { // toggling the TOC div 
     toc.fadeToggle(300); 
     event.preventDefault(); 
    }); 

    $(browser).resize(function() { 
     if ((toc.is(':visible')) && (browser.width() >=1449)) { 
      toc.fadeIn(); 
     } else if((toc.is(':visible')) && (browser.width() <=1448)){ 
      toc.fadeOut(); 
     } 
    }); 

Answer 1

첫 번째 IF 문에서 TOC의 가시성을 확인하는 코드는 혼동 스럽습니다. 다음과 같이 다시 작성하면 안됩니다 :

$(browser).resize(function() { 
    if ((toc.is(':hidden')) && (browser.width() >=1449)) { 
     toc.fadeIn(); 
    } else if((toc.is(':visible')) && (browser.width() <=1448)){ 
     toc.fadeOut(); 
    } 
});