아코디언 메뉴 질문입니다!

아코디언 메뉴 질문입니다!

QA

아코디언 메뉴 질문입니다!

본문

 

위에 그림처럼 아코디언 메뉴인데요.

항상 첫번째 탭 서브부분이 열려있는 상태입니다.

열려있지 않게 하려면 소스 수정을 어떻게 해야하나요?

 


<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>

 

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 123,117 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT