메뉴만들기연습3

문제

back-drop의 display 값이 변경되는 것을 상태값으로 관리해보세요.

 

1. javascript의 상태값 개념을 알고 사용할 줄 안다.

2. 상태값이 어떤 것을 기준으로 변경되어야하는 줄 안다.

 

답

css

변경없음

html

변경없음

javascript

    <script>
        var left=-200;
        document.querySelector("#meunBtn").addEventListener("click", function(){
            left=0;
            document.querySelector(".menu").style.left=left+"px";   
        });

        document.querySelector(".back-drop").addEventListener("click",function(){
            left=-200;
            document.querySelector(".menu").style.left=left+"px";    
        });
        /*
            1. menu가 trasition을 할때 back-drop이 나타났다 사라졌다하므로
            menu에 addeventlistener를 준다.
        */
        /*
            2. back-drop은 나타났다가 사라지는 상태만 있으므로 
            boolean 값으로 상태를 관리하면 좋다.
        */
        var isBackDrop=false; //display:none일때
        document.querySelector(".menu").addEventListener("transitionend", function(){
            if(isBackDrop){
                document.querySelector(".back-drop").style.display="none";
                isBackDrop=false;
            }else{
                document.querySelector(".back-drop").style.display="block";
                isBackDrop=true;
            }
        });
    </script>