[깃허브 예제] toggle버튼을 화면 크기에 따라 없어지고 있게 하는 법 js코드

      

        

          
          
          
        
         
      
(function(window, document){
    'use strict';
    
    const $toggles = document.querySelectorAll('.toggle');
    const $toggleBtn = document.getElementById('toggle-btn');
    // 사용자가 클릭하는 이벤트가 발생하면
    $toggleBtn.addEventListener('click', function(){
        toggleElements();
    });
    // 뷰포트를 resize할때 무엇인가를 하겠다.
    window.addEventListener('resize', function(){
        if(window,innerWidth>1024){
            //Off toggle element
            // 브라우저가 1024보다 크면 토글을 꺼라
            offElements();
        }
    });
    function toggleElements(){
        // forEach를 써서 반복 시키겠다.
        // toggles를 반복시킬것이다.
        // toggle이라는 클래스를 가지고 있는 요소에 on이라는 것을 실행할 것이다.
        [].forEach.call($toggles, function(toggle){
            toggle.classList.toggle('on');
        });
    }
    function offElements(){
        // 모든 toggle에 들어있는 on이라는 클래스를 지운다.
        [].forEach.call($toggles, function(toggle){
            toggle.classList.remove('on');
        });
    }
})(window, document)