一，通过原生JavaScript实现
原理：利用onMouseOver 和 onMouseOut 事件来触发一个自定义的 change() 函数，实现了鼠标悬停时显示下拉菜单，鼠标移出时隐藏下拉菜单的效果。
-
html部分代码
</ul> <ul class="right"> <li class="list" onMouseOver="change('list_cur','block')" onMouseOut="change('list_cur','none')"> <span>个人中心</span> <div id="list_cur"> <a href="#">已完成订单</a> <a href="#">未完成订单</a> <a href="#">我的保险</a> <a href="#">账号安全</a> <a href="#">个人信息</a> <a href="#">常用联系人</a> </div> </li> <li class="line">|</li> <li><span>使用须知</span></li> <li class="line">|</li> <li><span>收藏夹</span></li> <li class="line">|</li> <li><span>货物快运</span></li> <li class="line">|</li> <li><span>联系我们</span></li> </ul>
onMouseOver 和 onMouseOut 事件所含不同参数决定了他们各自实现的效果不同
第一个参数作为选择器，在函数中选中对应元素
第二个参数作为display属性值，配合选择语句来决定何时显示，何时隐藏下拉菜单
-
完整js代码
function change(myid,mode){ document.getElementById(myid).style.display=mode;//修改id=“myid”的元素的display属性为mode，即list_cur对应的总下拉菜单框架的display属性值，后续css代码有说明 if(mode=='block'){//显示下拉菜单 //设置下拉菜单所在的边框 document.getElementById(myid).style.border="1px solid #eee"; document.getElementById(myid).style.borderTop="none"; //设置鼠标滑过的li的边框及背景颜色 document.getElementById(myid).parentNode.style.backgroundColor="#fff";//修改父节点的css样式 document.getElementById(myid).parentNode.style.border="1px solid #eee"; document.getElementById(myid).parentNode.style.borderBottom="none"; } else{ //当不显示下拉列表时，鼠标滑过的li的边框及背景颜色 document.getElementById(myid).parentNode.style.backgroundColor=""; document.getElementById(myid).parentNode.style.border=""; } }
-
css部分代码
.right li{ cursor: pointer; border: 1px solid #f7f7f7; } .right li span{padding: 0px 9px;} .right .list{position: relative;} .right #list_cur{ width: 80px; position: absolute; display: none; /*原本的下拉菜单元素被隐藏，通过style.display方法改变display为block，使其显示*/ left: -1px; top: 30px; background-color: #FFFFFF; border: 1px solid #EEE; } .right #list_cur a{ display: block; /*因为a标签元素是行内元素，改变display值使其能向下排列显示*/ padding: 10px; line-height: 28px; color: #6C6C6C; } .right #list_cur a:hover{ background: #f5f5f5; }
-
部分样图
二，利用jQuery技术实现下拉菜单
方法一
原理：通过初始hide()和toggle()方法设置下拉菜单div的样式是否可见
-
html部分代码
<div class="_002"> <div id="sanjiao1"><img src="image/iconClose.jpg"></div> <span id="_get">我的设备</span> </div> <div class="list" > <a href="#">01</a> <a href="#">02</a> <a href="#">03</a> <a href="#">04</a> <a href="#">05</a> </div>
-
css部分代码
.list a{ /*链接标记样式，因为<a>标记是行内元素，所以要转换为块元素以换行*/ display: block; padding: 10px; line-height: 28px; color: #6C6C6C; }
-
js部分代码
$(function(){ $(".list").hide(); //初始化隐藏下拉菜单的样式 $("#_get").click(function(){ //通过一个单击事件，使用toggle()设置下拉菜单div的样式是否可见 $(".list").toggle(); });
-
部分样图
方法二
原理：通过 slideToggle()方法 实现下拉菜单的下滑与收起
相关代码
<!DOCTYPE html> <html> <head> <title>好友列表</title> <style> .device { cursor: pointer; } .contacts { display: none; } </style> <script src="jQuery.js"></script> <script> $(document).ready(function() { // 监听我的设备的点击事件 $('.device').on('click', function() { // 切换联系人的显示状态 $('.contacts').slideToggle(); //菜单是滑下或收起的，而不是突然隐藏或出现 }); }); </script> </head> <body> <div class="device">我的设备</div> <ul class="contacts"> <li>联系人1</li> <li>联系人2</li> <li>联系人3</li> </ul> <!-- 其他模块 --> <div>其他模块</div> </body> </html>
部分样图
我是小p，希望与大家分享更多的前端开发的知识，如果你有不同或更好的见解，欢迎在我的评论区留言！
