모바일 메뉴 하나 열리면 하나 닫히게
본문
<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(); // 상위 요소로의 이벤트 전파 방지
});
참고하셔서 원하시는 형식으로 수정 하시면 될 것 같습니다.
클릭시 하위 child도 다 포함되게 되있어서그런듯?
클릭시 닫힐때 클릭부분을 더 디테일하게 하면될듯
$('.depth_1 > a').click(function(){
라던지 그런식으로 수정해보세유
답변을 작성하시기 전에 로그인 해주세요.
