jQuery length와 slideToggle 예제

본 글은 jQuery의 'length'와 'slideToggle'에 대한 예제입니다.

검정박스 안의 내용을 복사하셔서 html문서에 붙여넣으신 뒤 확인해보세요.

 

<< CODE >>

 

<header>
    <nav>
        <h3>카테고리 (<span></span>)</h3>
        <ul id="gnb">
            <li>
                <h4>분류명1 (<span></span>)</h4>
                <ul>
                    <li><a href="#">카테고리1-1</a></li>
                    <li><a href="#">카테고리1-2</a></li>
                    <li><a href="#">카테고리1-3</a></li>
                    <li><a href="#">카테고리1-4</a></li>
                </ul>
            </li>
            <li>
                <h4>분류명2 (<span></span>)</h4>
                <ul>
                    <li><a href="#">카테고리2-1</a></li>
                    <li><a href="#">카테고리2-2</a></li>
                    <li><a href="#">카테고리2-3</a></li>
                    <li><a href="#">카테고리2-4</a></li>
                    <li><a href="#">카테고리2-5</a></li>
                    <li><a href="#">카테고리2-6</a></li>
                </ul>
            </li>
            <li>
                <h4>분류명3 (<span></span>)</h4>
                <ul>
                    <li><a href="#">카테고리3-1</a></li>
                    <li><a href="#">카테고리3-2</a></li>
                    <li><a href="#">카테고리3-3</a></li>
                    <li><a href="#">카테고리3-4</a></li>
                </ul>
            </li>
            <li>
                <h4>분류명4 (<span></span>)</h4>
                <ul>
                    <li><a href="#">카테고리4-1</a></li>
                    <li><a href="#">카테고리4-2</a></li>
                    <li><a href="#">카테고리4-3</a></li>
                    <li><a href="#">카테고리4-4</a></li>
                    <li><a href="#">카테고리4-5</a></li>
                </ul>
            </li>
            <li>
                <h4>분류명5 (<span></span>)</h4>
                <ul>
                    <li><a href="#">카테고리5-1</a></li>
                    <li><a href="#">카테고리5-2</a></li>
                    <li><a href="#">카테고리5-3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

<script type="text/javascript">
$(document).ready(function(){
    /* Category Count */
    jQuery('#gnb ul').each(function(){
        var totalCateNum = jQuery(this).children('li').length;
        jQuery(this).prev('h4').children('span').append(totalCateNum);
        jQuery(this).prev().click(function(){
            jQuery(this).next().stop().slideToggle();
        });
        return true;
    });
    jQuery('header nav h3 span').append(jQuery('#gnb li').length-jQuery('#gnb h4').length);

    /* 카테고리 클릭시 메뉴토글 */
    $('header nav h3').click(function(){
        /* 연속 클릭시 클릭 수 만큼 애니메이션이 동작하지 않도록 .stop()을 걸어주었음. */
        $('#gnb ul').stop().slideToggle(400);
    });
});
</script>

 

 

 

<< PREVIEW >>

 

카테고리 ()

• 분류명1 ()

  • 카테고리1-1
  • 카테고리1-2
  • 카테고리1-3

• 분류명2 ()

  • 카테고리2-1
  • 카테고리2-2
  • 카테고리2-3
  • 카테고리2-4
  • 카테고리2-5
  • 카테고리2-6

• 분류명3 ()

  • 카테고리3-1
  • 카테고리3-2
  • 카테고리3-3
  • 카테고리3-4

• 분류명4 ()

  • 카테고리4-1
  • 카테고리4-2
  • 카테고리4-3
  • 카테고리4-4
  • 카테고리4-5
  • 카테고리4-6

• 분류명5 ()

  • 카테고리5-1
  • 카테고리5-2
  • 카테고리5-3
  • 카테고리5-4