국비수업14(이벤트:사용자의행위)

국비수업 9일차(이벤트)에 대해 적어본다. 사용자가 하는 반응에 따라 다르게 동작하는 화면을 구현해보았다

Jquery의 Event

사용자의 input에 따라 반응하는 경우

결과창

메뉴열기를 click하면 오른쪽 사이드 메뉴가 열리고, 메뉴닫기를 click하면 메뉴가 닫힌다

HTML

<a class="btnopen" href="#">메뉴열기</a>
<a class="btnclose" href="#">메뉴닫기</a>

Jquery(js파일)

$(".btn").click(function(){
    alert("test");
    $(".box").addClass("on");
});

$(".btn2").click(function(){
    $(".box").removeClass("on");
});

$(".btnopen").click(function(){
    $(".menu").addClass("active");
});

$(".btnclose").click(function(){
    $(".menu").removeClass("active");
});
});

• $(".btn").click(function(){ } : 사용자가 버튼이라는 클래스를 클릭했을 때 익명의 함수를 실행하라는 명령을 내렸다
• $(".btn").click(function(){
  $(".box").addClass("on");
  }); : 사용자가 btn 클래스를 클릭할 때마다 bod라는 class에 'on'이 추가된다
• $(".btn2").click(function(){
  $(".box").removeClass("on");
  }); : 사용자가 btn2 클래스를 클릭할 때마다 bod라는 class의 'on'이 제거된다
• $(".btnopen").click(function(){
  $(".menu").addClass("active");
  }); : .btnopen이라는 클래스의 요소를 클릭하면 menu라는 class에 active라는 class가 생긴다
• $(".btnclose").click(function(){
  $(".menu").removeClass("active");
  }); : .btnclose이라는 클래스의 요소를 클릭하면 menu라는 class에 active라는 class가 제거된다

CSS

.box.on{
    border: 10px solid #000;
    background-color: #ddd;
    padding: 20px;
    width:65%
}

.menu{
    /* 우상단배치 */
    position: fixed; right:-300px; top:0; 
    width: 300px;
    height: 100%;
    background-color: orange;
    transition: .2s ease 0s;
}


.menu.active{
    right:0px;
}

• .menu{position: fixed; right:-300px; top:0;} : 오른쪽에서 -300px 지점에 배치
• .menu.active{right:0px;} : menu에 active라는 클래스가 추가되면 menu의 요소 위치가 오른쪽에서 0px지점으로 배치된다 (-300px지점에서 클릭하면 0px지점으로 이동)