고래씌

[jQuery] 14. 시작적인효과 메소드 ② (QnA 답변 예제) 본문

Front-End/jQuery

[jQuery] 14. 시작적인효과 메소드 ② (QnA 답변 예제)

고래씌 2023. 11. 16. 11:07

■ html파일에 style 태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14_시작적인효과메소드2</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        div{
            background-color: beige;
            width: 300px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 10px;
            border: 1px solid yellow;
            cursor: pointer;
        }

        p{
            border: 1px solid lightgray;
            width: 300px;
            height: 100px;
            margin-top: 5px;
            border-radius: 10px;
            padding: 10px;
            box-sizing: border-box;
            display:none;  /* 처음에는 안보이게 하기 위해 설정 */  
        }
    </style>
</head>

 

 

1. QnA 폼 만들기

    <h3>* slideDown()와 slideUp()</h3>
    
    <div>Q. 반품 언제까지 가능한가요?</div>
    <p>
        A. 확인후 답변드리겠습니다.
    </p>

    <div>Q. 상품 위치를 알고 싶습니다.</div>
    <p>
        A. 배송조회서비스를 이용하세요
    </p>

    <div>Q. 300사이즈도 있나요?</div>
    <p>
        A. 네 있습니다 ^^
    </p>

    <div>Q. 판매자와 연락이 안되면 어떡하나요?</div>
    <p>
        A. 경찰서에 신고하세요
    </p>

 

▶ $("div").click(function(e){

        const $p = $(this).next()

}

☞ jqeury 방식으로 선택된 요소를 변수에 담아둘때는 변수명 앞에 $를 붙이고는 한다.

☞ 현재 이벤트가 발생한 div요소 바로 뒤에 있는 요소

☞ $(this)  == $(window.event.target)  ==  $(e.target)

 

▶if($p.css("display") == "none"){  // display의 속성값을 알고싶다면 그냥 .css("display") 하면됨  
                    
       // 기존에 열려있는 p는 닫아주기
       $p.siblings("p").slideUp();   // 같은 요소에 있는 p들을 선택

       // 현재 p태그가 none 속성인 경우 보여지게끔
      $p.slideDown();   // 밑으로 내려가는 함수

}else{
   // 사라지게끔
   $p.slideUp();
}

 

 

▶ $p. slidToggle();   

☞ on off

 

    <script>
        $(function(){
            $("div").click(function(e){
                // $(window.event.target)
                // $(e.target)
                // $(this).next() // 현재 이벤트가 발생한 div 요소 바로 뒤에 있는 요소
                // $(this) == $(window.event.target) == $(e.target)
                
                const $p = $(this).next();  // jquery 방식으로 선택된 요소를 변수에 담아둘때는 변수명 앞에 $를 붙이곤한다.
                
                // css 메소드 또한 속성명만 매개변수로 넘겨주면, 해당 속성에 저장된 값을 반환해줌
                // if($p.css("display") == "none"){  // display의 속성값을 알고싶다면 그냥 .css("display") 하면됨  
                    
                //     // 기존에 열려있는 p는 닫아주기
                    // $p.siblings("p").slideUp();   // 같은 요소에 있는 p들을 선택

                //     // 현재 p태그가 none 속성인 경우 보여지게끔
                //     $p.slideDown();   // 밑으로 내려가는 함수
                // }else{

                //     // 사라지게끔
                //     $p.slideUp();
                // }
                $p.siblings("p").slideUp();
                $p.slideToggle();   // on off
                
            })
        })
    </script>

 

 

저작자표시 비영리 변경금지

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 13. 시각적인 효과 메소드 ① (show, hide, toggle / fadeIn, fadeOut, fadeToggle)  (0) 2023.11.15
[jQuery] 12. 이벤트(on메소드, 키보드 관련 메소드)  (0) 2023.11.15
[jQuery] 11. 종합응용예시(부트스트랩)  (0) 2023.11.15
[jQuery] 10. 추가적인 메소드(each, is 메소드)  (0) 2023.11.15
[jQuery] 9. 요소생성 및 제거  (0) 2023.11.15
'Front-End/jQuery' Related Articles more