mouseenter 和over 实现二级导航的原理

前端开发中我们常常会遇到制作二级导航的需求;
你可能第一直觉想到是用div 中装 ul 的结构 来实现:

<div>
  标题
  <ul>
     <li>item</li>
     <li>item</li>
     <li>item</li>
  </ul>
</div>

这样可以实现;但是后面会遇到事件冒泡,点击失灵等问题;在现实与隐藏的操作上也不是很方便;所以我更加建议 使用 两个div 的形式;




这样做就不用考虑 事件冒泡 的问题了;而且对样式和行为的控制也更加容易和方便扩展;

接下来定义行为,我们可能先想到的是用 mouseover 和 mouseOut 事件;一般没有问题;但是如果你的结构有嵌套存在时,可能你会遇到控制失灵的bug;这是浏览器判断错乱造成的;所以建议绑定enter leave  事件;

二级导航如果分两div来实现。需要为两个div同时绑定相同的enterleave  事件

Enter 时都清定时器。Leave时都设置定时器。把它抽象成插件就是:



boxid表示 标题 div 的 id;
ulid 表示 子目录 div 的 id ;
这里用了jq实现;




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值