아코디언 메뉴 질문입니다! 채택완료

</strong></p>

<p><h3>아코디언메뉴</h3>

<div class="d4 ex">

 <nav class="menu">

        <ul>

            <li class="active"><a href="#" class="m">MENU1</a>

                <div class="sub">1-서브메뉴영역
1-서브메뉴영역
1-서브메뉴영역
1-서브메뉴영역
</div>

            </li>

            <li><a href="#" class="m">MENU2</a>

                <div class="sub">2-서브메뉴영역
2-서브메뉴영역
2-서브메뉴영역
2-서브메뉴영역
</div>

            </li>

            <li><a href="#" class="m">MENU3</a>

                <div class="sub">3-서브메뉴영역
3-서브메뉴영역
3-서브메뉴영역
3-서브메뉴영역
</div>

            </li>

            <li><a href="#" class="m">MENU4</a>

                <div class="sub">4-서브메뉴영역
4-서브메뉴영역
4-서브메뉴영역
4-서브메뉴영역
</div>

            </li>

        </ul>

    </nav>

</div>

<style>

.d4{ height:400px;}

</style>

<script>

// .d4 .menu li .m을 클릭함.

$(".d4 .menu li .m").click(function(){

 var i = $(this);

 var s = i.siblings(".sub");

 var dis = s.css("display");

 // 만약 변수 dis의 값이 block과 같다면 => 즉 내가 클릭한 대상이 현재 열려있다면

 if(dis=="block"){

  i.parent("li").removeClass("active");

  s.slideUp(300);

  }

 // 만약 변수 dis의 값이 none과 같다면 => 즉 내가 클릭한 대상이 현재 닫혀있다면

 if(dis=="none"){

  $(".d4 .menu li").removeClass("active");

  i.parent("li").addClass("active");

  $(".d4 .menu li .sub").slideUp(300);

  s.slideDown(300);

  }

 return false;

 });

</script></p>

<p><strong>