一，通过原生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，希望与大家分享更多的前端开发的知识，如果你有不同或更好的见解，欢迎在我的评论区留言！
