세 단계로 드릴 다운하는 다음 메뉴가 있습니다. Main > sub > subsub
<nav>
<div class="mainMenu">Main Menu Item # 1.
<ul>
<li> Sub Menu Item # 1</li>
<li class="subMenu"> Sub Menu Item # 2
<ul>
<a href="New">
<li>New</li>
</a>
<a href="">
<li>Old</li>
</a>
<a href="">
<li>View </li>
</a>
</ul>
<div class="n_r2_c2"></div>
</li>
<li> Sub Menu Item # 3</li>
<li> Sub Menu Item # 4</li>
</ul>
</div>
그리고 이것은 내 JQ로 :
$('.mainMenu').click(function () {
$(this).children('ul').slideToggle(250);
});
$('.subMenu').click(function () {
$(this).children('ul').slideToggle(250);
});
문제는 메인의 하위 메뉴에 대한 하위 메뉴 토글이 잘 작동하지만 하위 메뉴에서 항목을 클릭하면 하위 메뉴를 토글하는 대신 자동으로 닫힙니다. 하위 메뉴를 클릭하면 메인 메뉴 click이벤트도 가장 많이 발생하기 때문입니다. 아마도 하위 메뉴가 내부에 있고 메인 div에 대한 클릭으로 클릭을 받기 때문일까요?
어쨌든이 문제를 어떻게 해결할 수 있습니까?
이벤트가 DOM 트리에서 버블 링되는 것을 방지 하려면 event.stopPropagation () 을 사용하십시오 .
예:
$('.subMenu').click(function (e) {
$(this).children('ul').slideToggle(250);
e.stopPropagation();
});
그러면 문제가 해결됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다