냐울당 햄버거 메뉴

목차

    반응형

    안녕하세요. 플입니다.

    오늘은 더보기 버튼을 클릭하면 사라지게 해 보겠습니다.

     

     


     1.  .click() 메서드 활용

    먼저 클릭하면 사라지게 만들 것이니까

    click() 메서드를 사용합니다.

     

    $(".sub2 .btn").click(function(){
          
           
           
       }); 

    ""(따옴표) 안에 있는 것은 더보기 버튼의 클래스명입니다.

     

    클릭을 했을 때 일어날 동작을 적어주어야 하니까

    click() 메서드 괄호 안에 함수를 만들어줍니다.

     

    함수는 function(){  }을 적어서 중괄호 안에 원하는 동작을 적어줍니다.

     

    쉽게 말해 click을 했을 때 일어나는 일을 적을 주머니라고 생각해주세요.


     2.  .fadeOut() 메서드 활용

    더보기 버튼이 없어졌습니다.

    숨기는 것은 fadeOut() 메서드를 이용해 할 수 있습니다.

     

    $(".sub2 .btn").click(function(){
          
           $(".btn").fadeOut();
           
       }); 
        

    이렇게 아까 열어둔 함수 중괄호 안쪽에 fadeOut() 메서드를 적어줍니다.

    가려지는 것은 더보기 버튼이니 ""(따옴표) 안쪽에서는 더보기 클래스명을 적어줍니다.

     

    클릭하면 더보기 버튼이 사라지게 만들기 완성입니다.

     

     


    그럼 이만.

    총총.

    반응형

    'coding > JavaScript' 카테고리의 다른 글

    [jQuery] 햄버거 메뉴 만들기 1 - fadeOut()  (0) 2020.05.06
    [jQuery] this를 이용해 버튼 색 바꾸기  (0) 2019.12.12
    [javaScript] 경고창  (2) 2019.12.04
    [Node.js] 작업 확인하기  (0) 2019.09.27
    [Javascript] 변수 범위  (0) 2019.09.04
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바