下拉菜单这样的功能相信是最常见不过的一种了 虽然很多使用了UI库的项目中有类似组件,但是可能对于实际的需求并不满足,比如我现在这个vue的项目使用的是eleUI
要求实现这么个功能:鼠标浮动上去宽度变宽并且展示下拉列表,一开始当然选择用el-dropdown咯,毕竟有写的效果很好看,但是问题来了el这个组件生成的下拉列表是通过绝对定位在页面中的,那就意味着没法实现在下拉列表hover的时候 上面标题的宽度继续保持变宽,所以想了想还是自己写吧,大概就是这么个结构,hover当然要写在最外层的dom上
<div style="position: relative"> <div style="height: 20px"> 下拉列表 </div> <div style="position: absolute;top: 20px;"> <ul> <li>下拉列表1</li> <li>下拉列表2</li> <li>下拉列表3</li> </ul> </div> </div>
好的,功能完成了。
这时候我又一想要是下拉列表并不是和上面的标题紧贴着呢,如果有空白的话我这么写当鼠标在中间空白部分的时候 整个hover效果就会消失,所以我又改了一下,简单解决了这个问题
<div style="position: relative"> <div style="height: 20px"> 下拉列表 </div> <div style="position: absolute;top: 0;padding-top: 20px"> <ul> <li>下拉列表1</li> <li>下拉列表2</li> <li>下拉列表3</li> </ul> </div> </div>