Tip和菜单的实现方式

Tip和菜单有类似的功能,即鼠标光标移上去的时候显示指定元素,鼠标光标离开的时候隐藏该元素。如下

 

示例1:下拉菜单(鼠标移动到“客户服务”上时出现,离开则隐藏)

 

示例2:水平菜单(鼠标移动到“餐饮美食”出现,离开则隐藏)

 

 

示例3:Tip示例(鼠标移动到“更换”出现,离开则隐藏)

 

从交互角度讲很简单,移上去显示,离开隐藏。代码则是两个事件mouseentermouseleave。但有个细节,如果触发元素(比如上面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事件。

  1. div#city触发mouseenter时,显示div.citys
  2. div#city触发mouseleave时,延迟隐藏div.citys,用一个标示boo变量记录是否该隐藏
  3. div.citys触发mouseenter时,boo标示为false,表示不隐藏
  4. div.citys触发mouseleave时,boo标示为true,表示可以隐藏

 

三、同二类似,也是延迟一段时间隐藏,当触发div.citys的mouseenter时移除div#city的mouseenter事件,div.citys的mouseleave事件触发时再重新添加上 

posted on   snandy  阅读(5426)  评论(0编辑  收藏  举报

编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示