Tip和菜单的实现方式
2024-08-20 15:36:42
Tip和菜单有类似的功能，即鼠标光标移上去的时候显示指定元素，鼠标光标离开的时候隐藏该元素。如下
示例1：下拉菜单(鼠标移动到“客户服务”上时出现，离开则隐藏)
示例2：水平菜单(鼠标移动到“餐饮美食”出现，离开则隐藏)
示例3：Tip示例(鼠标移动到“更换”出现，离开则隐藏)
从交互角度讲很简单，移上去显示，离开隐藏。代码则是两个事件mouseenter，mouseleave。但有个细节，如果触发元素(比如上面Tip里的“更换”)，不包含下面显示的城市列表div的话，鼠标光标离开时就隐藏了，但用户其实是想移动到城市列表里去选另外一个城市。
通常有如下三种实现方式
一、触发元素把后显示的元素包含进来，一般菜单都是这么实现的。因为每个菜单的内容都不一样，这种结构是合理的。这种结构不会出现鼠标移动不到菜单里的情况。如示例1的HTML结构
线上示例：http://snandy.github.io/lib/menu/menu.html
二、触发元素不包含后显示元素，即两者可能是平级的（兄弟元素）。这种结构会出现鼠标移动不到显示元素上。JS需要做些特殊处理。如示例3的HTML结构
线上示例：http://snandy.github.io/lib/menu/tip.html
这种不包含结构往往用在很多相同元素的tip上，这时只要用一个显示元素，不必每个里面都包含相同HTML代码。实现时须注意，div#city和div.citys都要添加mouseenter和mouseleave事件。
- div#city触发mouseenter时，显示div.citys
- div#city触发mouseleave时，延迟隐藏div.citys，用一个标示boo变量记录是否该隐藏
- div.citys触发mouseenter时，boo标示为false，表示不隐藏
- div.citys触发mouseleave时，boo标示为true，表示可以隐藏
三、同二类似，也是延迟一段时间隐藏，当触发div.citys的mouseenter时移除div#city的mouseenter事件，div.citys的mouseleave事件触发时再重新添加上
最新文章
- MFC学习随笔（1）
- AC日记——输出亲朋字符串 openjudge 1.7 05
- “wsimport -keep ”生成客户端报错“Use of SOAP Encoding is not supported.”
- Java 查询URL对应IP地址
- win8 64位系统，安装JDK的步骤及其环境配置
- jvm的内存区域简介
- NSDateComponents
- 连接池报错 Proxool Provider unable to load JAXP configurator file: proxool.xml
- 教大家怎样给UITextView加入placeholder扩展
- keepalived双机热备nginx
- HashMap 的底层原理
- C# .net 填充无效，无法被移除 微信小程序解密失败的解决办法
- Git自学笔记
- RESTful API 设计指南（转）
- 【arc093f】Dark Horse（容斥原理，动态规划，状态压缩）
- Atitit 面试问题总结
- 下载Chrome独立版（alternate/offline Installer）的地方
- ASP.NET之旅--深入浅出解读IIS架构
- Key Set---hud5363（快速幂）
- 【中文同义词近义词】词向量 vs 同义词近义词库