메뉴 jquery 질문
본문
햄버거 메뉴를 수정해야하는 상황인데요,
햄버거 메뉴 클릭시 전체 메뉴가 열려있는데 (li에 class에 active)
다 닫혀있는 형태로 시작하려면 해당 소스에서 어떤 부분을 수정해야 할까요?
<div class="menuList">
<ul class="list">
<li>
<a class="dropdown-toggle">1차<i></i></a>
<ul class="sMenu">
<li><a href="">2차</a></li>
<li><a href="">2차</a></li>
<li><a href="">2차</a></li>
</ul>
</li>
</ul>
</div>
$("body").on("click ", "#menuArea .menuList>.list>li", function(){
var idx = $("#menuArea .menuList>.list>li").index($(this));
$("#menuArea .menuList>.list>li").each(function(index){
if(idx == index){
if(!$(this).hasClass("active")){
$(this).addClass("active");
$(this).find(".sMenu").slideDown(300);
}else{
$(this).removeClass("active");
$(this).find(".sMenu").slideUp(300);
}
}else{
$(this).removeClass("active");
$(this).find(".sMenu").slideUp(300);
}
});
});
답변 1
안녕하세요.
아래의 코드를 한번 참고해 보시겠어요?
html
<div class="menuList">
<ul class="list">
<li>
<a class="dropdown-toggle">1차<i></i></a>
<ul class="sMenu">
<li><a href="">2차</a></li>
<li><a href="">2차</a></li>
<li><a href="">2차</a></li>
</ul>
</li>
</ul>
</div>
css
#menuArea .menuList>.list>li .sMenu {
display: none;
}
jquery
$(document).ready(function() {
// 페이지 로드 시 2차 메뉴를 숨깁니다.
$("#menuArea .menuList>.list>li .sMenu").hide();
});
$("body").on("click ", "#menuArea .menuList>.list>li", function(){
var idx = $("#menuArea .menuList>.list>li").index($(this));
$("#menuArea .menuList>.list>li").each(function(index){
if(idx == index){
if(!$(this).hasClass("active")){
$(this).addClass("active");
$(this).find(".sMenu").slideDown(300);
}else{
$(this).removeClass("active");
$(this).find(".sMenu").slideUp(300);
}
}else{
$(this).removeClass("active");
$(this).find(".sMenu").slideUp(300);
}
});
});
감사합니다~~~
위 방법으로 해결했습니다^.^!!
