아코디언 메뉴 질문입니다!
본문
위에 그림처럼 아코디언 메뉴인데요.
항상 첫번째 탭 서브부분이 열려있는 상태입니다.
열려있지 않게 하려면 소스 수정을 어떻게 해야하나요?
<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>
답변 2
이걸 추가해보세요
$(function() {
$(".active").slideUp(300);
});
안되요 ㅠㅠ
첫번째 <li class="active"> 에서 class="active" 삭제해보세요.
클래스에 관한 css만 사라지고, 계속 열려있습니다.
답변을 작성하시기 전에 로그인 해주세요.
