创建一个隐藏的下拉菜单 H5-CSS-JS

600字

最近开始和朋友写一个代购的前端页面样式，目前还只是针对于PC端的web界面。有一个需求是：当鼠标移入导航栏的某一个元素时，弹出一个下拉菜单。

在看过几篇度娘的攻略之后，暂定实现原理为：将下拉菜单CSS的display属性默认为none。这样整个下拉菜单就处于隐藏状态。然后在鼠标移入目标元素时，就是触发hover属性时，将下拉菜单的display属性更改为block，这样就完成了整个效果。

但是在实际编写的时候小玉发现（现象）：如果采用CSS编写，这个下拉菜单必须要是目标元素的子元素才有效果。

哎呀妈呀，写完这段话才发现，这个现象是因为选择器的写法原因造成的的，真是尴尬

#a:hover #b{
        display: block;
        }
/*  这个选择器的意思是 a 鼠标移入下的 b ，那当然 b 得是 a 的子元素才能找得到 b  */

要达到同样的效果，还有两种JS的写法：

2.这个是用到 Jquery 的方法

到这里，效果是实现了，但是还有一个疑问：如果下拉菜单不是目标元素的子元素，能实现这个效果吗？于是，小玉试了一下，如果不采用JS的话，emmm 小玉都不知道要怎么写style……

如果采用JS的话，会出现一个新的问题（现象）：就是当鼠标移入 a 的时候，确实可以弹出 b ，但是，当尝试把鼠标接着移入 b 的时候，b 就消失了。究其原因是因为：b 如果不是 a 的子元素，那么将鼠标从 a 移入 b 的时候，鼠标会脱离 a 元素的区域，导致 b 从新回到隐藏状态。这肯定不是我们想要的效果。

所以当前看来的结论是：如果要实现一个隐藏的下拉菜单，那么这个菜单最好是触发元素的子元素。
最后推荐一下我的个人公众号，里面都记录一些我在日常学习工作生活中遇到的各种小问题