参见英文答案 >
jquery stop child triggering parent event6
我有一个以下菜单,演练到三个层次:
主要>子> subsub
我有一个以下菜单,演练到三个层次:
主要>子> 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); });
问题是主菜单的子菜单切换主菜单工作正常,但是当我单击子菜单中的项目而不是切换其子菜单时,它会自动关闭,因为当我点击子菜单时,主菜单单击事件也被触发很可能是因为子菜单里面是它,它需要点击它的主要div?
无论如何我可以解决这个问题,请帮忙.
解决方法
使用
event.stopPropagation()来防止事件冒出DOM树.
例:
$('.subMenu').click(function (e) { $(this).children('ul').slideToggle(250); e.stopPropagation(); });
这将解决您的问题.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。