모바일 메뉴 하나 열리면 하나 닫히게 채택완료
심심한나쵸
2년 전
조회 5,281
<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>
</p>
<p id="SE-7f7ca395-f990-4deb-a1d8-d3ba8c1ceecf">$('.depth_1').click(function(){</p>
<p id="SE-46233a61-f956-43fd-bdc0-4e83decd033b">$('.depth_2').slideUp();</p>
<p id="SE-d26817fa-0a02-4754-964c-54dd0f29e4a5">$('.depth_1 > a').removeClass('on');</p>
<p id="SE-79488f6e-d109-4fff-bfa7-79996c898ac8"><i>if</i> ($(this).children('.depth_2').is(':hidden')){</p>
<p id="SE-55bee6b6-a84a-41e1-b090-054ae7906d06">$(this).children('.depth_2').slideDown(); <i>// 메뉴 오픈</i></p>
<p id="SE-e5c61db2-ed71-4f0a-a59a-2c9cd5dfdc35">$(this).children('.depth_1 > a').addClass('on');</p>
<p id="SE-506e1245-76a0-4be4-847f-e17742b8d0aa">} <i>else</i> {</p>
<p id="SE-8803dcbf-4ee6-40ef-9f70-960e3f3b7e54">$(this).children('.depth_2').slideUp(); <i>// 메뉴 닫기</i></p>
<p id="SE-303d79d2-6f0b-4b32-9229-3c8ccafec31f">$(this).children('.depth_1 > a').removeClass('on')</p>
<p id="SE-d179363e-3a18-4150-b9f4-564130c7d2a3">}</p>
<p id="SE-78b1a366-1e43-4afe-9a8f-97d8574e6325">});</p>
<p id="SE-f1a720ff-492a-4804-a5bd-e006b69f6e15">
이렇게 모바일 메뉴를 만들었는데
depth_1 을 클릭하면 하위 메뉴가 열려야 하고
다른 depth_1를 클릭하면 해당 depth_1 이외에 다른 메뉴들은 닫히게끔 해놨는데요
문제는 depth_1 하위 depth_2 > a 를 클릭해도
닫히면서 해당 링크로 이동된다는 점입니다
depth_2 > a 를 클릭했을때는 닫히지 않고 자연스럽게 이동되기를 원하는데요
코드를 어떻게 수정해야 할지 모르겠습니다..
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
다음과 같이 해 볼 수 있을 것 같습니다.
</p>
<p>$('.depth_1 > a').click(function(event) {
event.preventDefault(); // 기본 링크 동작을 막음</p>
<p> $('.depth_2').slideUp();
$('.depth_1 > a').removeClass('on');</p>
<p> var $depth2 = $(this).closest('.depth_1').children('.depth_2');</p>
<p> if ($depth2.is(':hidden')) {
$depth2.slideDown(); // 메뉴 오픈
$(this).addClass('on');
} else {
$depth2.slideUp(); // 메뉴 닫기
$(this).removeClass('on');
}
});</p>
<p>$('.depth_2 > li > a').click(function(event) {
event.stopPropagation(); // 상위 요소로의 이벤트 전파 방지
});
참고하셔서 원하시는 형식으로 수정 하시면 될 것 같습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인