메뉴 만들기 (accordion)

여기서는 추가되는 항목들은 하나의 함수로 사용해야 더 편리하다.

(FrontEnd에서 하위 항목이 추가되고, 그 하위 항목인 jQuery의 하위항목이 추가되어도!)

 

아래 하위항목이 존재한다면을 조건으로 삼으면 된다.

 

---

    <style>
        .menu {
            width: 260px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .menu a {
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            display: block;
            text-decoration: none;
            color: #FFF;
            padding-left: 20px;
        }

        .menu ul {
            position: relative;
            list-style: none;
            padding: 0;
        }

        .main-menu>li {
            background: #ED5565;
            border-bottom: 1px solid #DA4453;
        }

        .main-menu>li:hover {
            background: #DA4453;
        }

        .sub-menu>li>a {
            background: #383838;
            border-left: 10px solid #383838;
        }

        .sub-menu>li:hover>a {
            border-left: 10px solid #DA4453;
        }

        .more {
            font-size: 20px;
            position: absolute;
            right: 20px;
            transition-duration: 0.5s;
        }

        .active {
            transform: rotate(45deg);
        }

    </style>

---

    <div class="menu">
        <ul class="main-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">Oracle</a></li>
            <li>
                <a href="#">FrontEnd</a>
                <ul class="sub-menu">
                    <li><a href="#">HTML5</a></li>
                    <li><a href="#">CSS3</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li>
                        <a href="#">jQuery</a>
                        <ul class="sub-menu">
                            <li><a href="#">객체탐색</a></li>
                            <li><a href="#">객체조작</a></li>
                            <li><a href="#">이벤트</a></li>
                            <li><a href="#">효과</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Server</a></li>
            <li>
                <a href="#">Framework</a>
                <ul class="sub-menu">
                    <li><a href="#">Mybatis</a></li>
                    <li><a href="#">Spring</a></li>
                </ul>
            </li>
        </ul>
    </div>

---

    <script>
        $(function() {

            $(".main-menu ul").hide();

            //prev() : 선택한 요소의 이전 요소를 선택 (↔ next())
            //append() : 선택한 요소의 마지막에 추가
            //==> 서브메뉴가 존재하는 경우 바로 이전 a태그 사이 마지막에 span태그 추가
            //<a href="#">FrontEnd <span class="more">+</span> </a>
            $(".sub-menu").prev().append('<span class="more">+</span>');


            //a태그를 클릭했을 때도 span을 클릭하도록 하는 함수
            $(".more").parent().click(function() {
                $(this).children().click();
            });

            //span태그가 추가된 경우 class명 more
            $(".more").click(function(event) {

                //.slideToggle() : 보이지 않는 요소는 나타나게, 보이는 요소는 사라지게
                //this의 부모인 a태그의 다음 ul태그에 .slideToggle() 속성 삽입 
                $(this).parent().next().slideToggle();

                //.attr("class") : 요소의 class 속성의 값 가져오기
                //class = more일 때와  class= more active일 때 -> if로 구분
                if ($(this).attr("class") == "more") {
                    //span태그 회전하는 class추가
                    $(this).addClass("active");
                } else {
                    $(this).removeClass("active");
                }

                //**이벤트 버블링 제거
                event.stopPropagation();

            });
        })
    </script>