Notice
Recent Posts
Recent Comments
Link
Tags
more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

JongDDA의 한걸음 한걸음씩

[JavaScript & Jquery] 토글 클레스(toggleClass) 본문

개발/프론트엔드

[JavaScript & Jquery] 토글 클레스(toggleClass)

종따 2021. 4. 4. 20:43
728x90

toggleClass 메소드는 가져온 요소에서 () 안에 지정한 클래스명이 없으면 추가하고, 있으면 삭제한다는 의미의 메소드이다.

 

아래 예제를 통해 살펴보자

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메뉴 만들기</title>
    <style>
        .submenu h3{
            margin-bottom: 16px;
            cursor: pointer;
            color: teal;
        }
        .submenu h3:hover{
            text-decoration: underline;
        }
        /* 가려질 수 있도록 하자 */
        .hidden{
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</script>
</head>
<body>
    <div class="sidebar">
        <div class="submenu">
            <h3>1. 한식</h3>
            <ul class= "hidden">
                <li>불고기</li>
                <li>비빔밥</li>
                <li>김치찌개</li>
            </ul>
        </div>
        <div class="submenu">
            <h3>2. 일식</h3>
            <ul class= "hidden">
                <li>초밥</li>
                <li>돈부리</li>
                <li>판모밀</li>
            </ul>
        </div>
    </div>
    
    <script>
        /*
        보였다 말았다 하는 목록을 위해 필요한 제이쿼리 메소드!
        on("이벤트", 이벤트핸들러) : 이벤트 핸들러 등록용 메소드 
        toggleClass("클레스명") : 이 이름을 가진 클레스가 있으면 없애고, 없으면 만들어!
        */
        $(document).ready(function(){
            $("h3").on("click", function(){
                // this : 이벤트가 발생환 주체
               $(this).next().toggleClass("hidden")
            })
        })
    </script>
</body>
</html>

 

 

h3 태그를 클릭(이벤트)할시 함수(이벤트 핸들러)가 실행된다. 위의 함수(이벤트 핸들러)는 toggleClass("hidden")이기 때문에 클릭시 "hidden" 클래스가 없으면 만들고 있으면 지워버린다.  따라서 h3태그 클릭할때마다 ul 태그를 보여주거나 숨겨버린다.

 

 

 

 

728x90
반응형

'개발 > 프론트엔드' 카테고리의 다른 글

[JavaScript & Jquery] 그룹 이벤트 등록 메소드  (0) 2021.04.05
[JavaScript & Jquery] 객체 조작 메소드  (0) 2021.04.04
[JavaScript & Jquery] 선택자  (0) 2021.04.04
[Jquery] 제이쿼리란, 제이쿼리 연동하기  (0) 2021.04.01
[JavaScript] 로컬스토리지(local storage)  (0) 2021.03.28
'개발/프론트엔드' Related Articles more
Comments