<h3>아코디언메뉴</h3>
<div class="d4 ex">
 <nav class="menu">
        <ul>
            <li class="active"><a href="#" class="m">MENU1</a>
                <div class="sub">1-서브메뉴영역<br>1-서브메뉴영역<br>1-서브메뉴영역<br>1-서브메뉴영역<br></div>
            </li>
            <li><a href="#" class="m">MENU2</a>
                <div class="sub">2-서브메뉴영역<br>2-서브메뉴영역<br>2-서브메뉴영역<br>2-서브메뉴영역<br></div>
            </li>
            <li><a href="#" class="m">MENU3</a>
                <div class="sub">3-서브메뉴영역<br>3-서브메뉴영역<br>3-서브메뉴영역<br>3-서브메뉴영역<br></div>
            </li>
            <li><a href="#" class="m">MENU4</a>
                <div class="sub">4-서브메뉴영역<br>4-서브메뉴영역<br>4-서브메뉴영역<br>4-서브메뉴영역<br></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>