我有一个包含三级菜单的导航栏:
问题是主菜单的子菜单可以正常切换,但当我点击子菜单中的项目时,它不是切换其子菜单,而是关闭自己,因为当我点击子菜单时,主菜单的click事件也会被触发,很可能是因为子菜单在主菜单内部,所以它将点击作为对主div的点击?
无论如何,我该如何解决这个问题,请帮忙。
主菜单 > 子菜单 > 孙子菜单
<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的点击?
无论如何,我该如何解决这个问题,请帮忙。