카테고리가 많을때 세로로 길게 나열된 것을 보면 보기 싫을때가 있다. jquery를 이용해 메인 카테고리를 기준으로 접고 펼칠 수 있다.

 

아래 코드를 기준으로 시작하겠다.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    </head>
    <body>
        <div id="box">
            <li class="main">
                test
                <ul class="sub">
                    <li>test1</li>
                    <il>test2</il>
                </ul>
            </ul>
        </div>
    </body>
</html>

위 코드를 실행한 결과

서브 카테고리가 일단 보이지 않아야 하기 때문에 sub class에 style을 아래와 같이 추가한다.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    </head>
    <body>
        <div id="box">
            <li class="main">
                test
                <ul class="sub" style="display:none">
                    <li>test1</li>
                    <il>test2</il>
                </ul>
            </ul>
        </div>
    </body>
</html>

 

그리고 main 을 클릭했을때, 서브 카테고리가 보이게끔 아래와 같이 jquery를 작성해준다.

main을 클릭할시 sub가 웹 페이지에 보일시( is(":visible") ), css() 함수로 display 속성을 none으로 바꾼다.

sub가 웹 페이지에 보이지 않을 시, css() 함수로 display 속성을 block으로 바꾼다.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    </head>
    <body>
        <div id="box">
            <li class="main">
                test
                <ul class="sub" style="display:none">
                    <li>test1</li>
                    <il>test2</il>
                </ul>
            </ul>
        </div>
        <script>
            $(".main").click(function(){
                if($(".sub").is(":visible")){
                    $(".sub").css("display","none");
                }
                else{
                    $(".sub").css("display","block");
                }
            })
        </script>
    </body>
</html>

 

none
block

 

이를 부드럽게 접히거나 펼쳐기게끔 slideUp(), slideDown() 함수를 사용해보자.

아래 코드를 테스트 해보면 부르럽게 서브 카테고리가 펼쳐지고 접히는 것을 볼 수 있다.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    </head>
    <body>
        <div id="box">
            <li class="main">
                test
                <ul class="sub" style="display:none">
                    <li>test1</li>
                    <il>test2</il>
                </ul>
            </ul>
        </div>
        <script>
            $(".main").click(function(){
                if($(".sub").is(":visible")){
                    $(".sub").slideUp();
                }
                else{
                    $(".sub").slideDown();
                }
            })
        </script>
    </body>
</html>

 

만약 카테고리를 여러개 만들어서 각각에 이러한 효과를 주고 싶다면 아래 글을 읽어보는 것을 추천한다.

 

[jquery] - this를 이용한 코드 중복 방지

jquery 사용시 같은 class나 id를 가진 태그가 예를들어 클릭이 되었을때 각 상황에 맞는 함수를 실행하려고 한다면 비효율적으로 작성 할 수도 있다. 하지만 this 를 사용하면 코드의 길이와 중복을 피할 수 있다..

lactea.kr

 

Reference 

https://it-ing.tistory.com/53#