jQuery阻止 toggle方法事件冒泡

本文介绍了一种在左侧导航菜单中解决点击子项时触发父级toggle显示隐藏问题的方法。通过给父节点的点击事件添加return false阻止了事件冒泡。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写了一个左侧导航的菜单,父菜单元素为li,子节点元素也为ul>li,当给父节点的li绑定click事件执行toggle()函数时,发现点击子节点的li标签也会执行toggle函数。由此造成事件冒泡。

解决方法:

在绑定click事件的函数后添加return false即可解决事件冒泡的问题,代码如下:

  $('.api_left').find('li').live('mouseover',function(){ //父节点li
$(this).css('cursor','pointer');
 }).live('mouseout',function(){
  $(this).css('cursor','');
 }).live('click',function(){
$(this).find('>ul').toggle();
return false; //解决事件冒泡
 });

<div class = "api_left">
<ul>
<li>
<span style="vertical-align:top;">平台介绍</span>
<ul style="display:none;"> <!--子菜单-->
<li><a>平台描述</a></li>
<li><a>平台描述</a></li>
</ul>
</li>

</ul>

</div>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值