모바일 메뉴 하나 열리면 하나 닫히게

모바일 메뉴 하나 열리면 하나 닫히게

QA

모바일 메뉴 하나 열리면 하나 닫히게

본문

<li class="depth_1">

<a href="javascript:;">회사소개<i></i></a>

<ul class="depth_2">

<li><a href="/document/aboutus#1">인사말</a></li>

<li><a href="/document/aboutus#2">설립 목적</a></li>

<li><a href="/document/aboutus#3">교육 특징</a></li>

<li><a href="/document/aboutus#4">주요 사업</a></li>

<li><a href="/document/aboutus#5">오시는길</a></li>

</ul>

</li>

​
$('.depth_1').click(function(){
$('.depth_2').slideUp();
$('.depth_1 > a').removeClass('on');
if ($(this).children('.depth_2').is(':hidden')){
$(this).children('.depth_2').slideDown(); // 메뉴 오픈
$(this).children('.depth_1 > a').addClass('on');
} else {
$(this).children('.depth_2').slideUp(); // 메뉴 닫기
$(this).children('.depth_1 > a').removeClass('on')
}
});
​

이렇게 모바일 메뉴를 만들었는데

depth_1 을 클릭하면 하위 메뉴가 열려야 하고

다른 depth_1를 클릭하면 해당 depth_1 이외에 다른 메뉴들은 닫히게끔 해놨는데요

문제는 depth_1 하위 depth_2 > a 를 클릭해도

닫히면서 해당 링크로 이동된다는 점입니다

depth_2 > a 를 클릭했을때는 닫히지 않고 자연스럽게 이동되기를 원하는데요

코드를 어떻게 수정해야 할지 모르겠습니다..

이 질문에 댓글 쓰기 :

답변 2

다음과 같이 해 볼 수 있을 것 같습니다.

 


$('.depth_1 > a').click(function(event) {
    event.preventDefault(); // 기본 링크 동작을 막음
    $('.depth_2').slideUp();
    $('.depth_1 > a').removeClass('on');
    var $depth2 = $(this).closest('.depth_1').children('.depth_2');
    if ($depth2.is(':hidden')) {
        $depth2.slideDown(); // 메뉴 오픈
        $(this).addClass('on');
    } else {
        $depth2.slideUp(); // 메뉴 닫기
        $(this).removeClass('on');
    }
});
$('.depth_2 > li > a').click(function(event) {
    event.stopPropagation(); // 상위 요소로의 이벤트 전파 방지
});

 

참고하셔서 원하시는 형식으로 수정 하시면 될 것 같습니다.

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

회원로그인

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