메뉴 jquery 질문

메뉴 jquery 질문

QA

메뉴 jquery 질문

답변 1

본문

햄버거 메뉴를 수정해야하는 상황인데요,

햄버거 메뉴 클릭시 전체 메뉴가 열려있는데 (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);
        }
    });
});
 

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #menu ×
전체 14
© SIRSOFT
현재 페이지 제일 처음으로