9강 - 아코디언 메뉴

아코디언 메뉴에 상태 추가하는 법

<!-- 폰트어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<span class="btn_1">전체열기</span>

<hr>

<!-- ul.cur>li.active*3>div{챕터 $}+ul>li*5>a[href=#]{아이템 $} -->
<ul class="cur">
    <li class="active">
        <div>챕터 1</div>
        <ul>
            <li><a href="#">아이템 1</a></li>
            <li><a href="#">아이템 2</a></li>
            <li><a href="#">아이템 3</a></li>
            <li><a href="#">아이템 4</a></li>
            <li><a href="#">아이템 5</a></li>
        </ul>
    </li>
    <li class="active">
        <div>챕터 2</div>
        <ul>
            <li><a href="#">아이템 1</a></li>
            <li><a href="#">아이템 2</a></li>
            <li><a href="#">아이템 3</a></li>
            <li><a href="#">아이템 4</a></li>
            <li><a href="#">아이템 5</a></li>
        </ul>
    </li>
    <li class="active">
        <div>챕터 3</div>
        <ul>
            <li><a href="#">아이템 1</a></li>
            <li><a href="#">아이템 2</a></li>
            <li><a href="#">아이템 3</a></li>
            <li><a href="#">아이템 4</a></li>
            <li><a href="#">아이템 5</a></li>
        </ul>
    </li>
</ul>

.btn_1 {
    cursor : pointer; 
    border: 1px solid black;
    border-radius : 10px;
    padding: 10px;
    display: inline-block;
}
.btn_1:hover {
    background-color: black;
    color: white;
}
.cur > li > ul {
    display: none;
}

.cur > li > div::after {
    content: "\f078";
    font-family: "Font Awesome 6 free";
    font-weight: 900;
    float:right;
    cursor : pointer;
}
.cur > li.active > div::after {
    content : "\f077";
}

// js 다시 입력  
$(".btn_1").click(function(){
    if($(lis.not)(.active.length == 0){
       $lis.removeClass('active').children('ul').sliderUp
();else{
        $lis.addClass('active').children('ul').slideDown();
    }
       
});
function updateBtni.abel(){
    if ( $('ul.cur' > li:not('.active'))
};

• 코드펜으로 완성된 코드 한번에 보러가기