效果
CSS 代码
* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
margin: 100px;
}
.menu-head {
width: 185px;
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 17px;
color: #475052;
cursor: pointer;
border: 1px solid #e1e1e1;
position: relative;
margin: 0px;
font-weight: bold;
background: #f1f1f1 center right no-repeat;
}
.menu-list .current {
background: #f1f1f1 center right no-repeat;
}
.menu-body {
width: 223px;
height: auto;
overflow: hidden;
line-height: 38px;
border-left: 1px solid #e1e1e1;
backguound: #fff;
border-right: 1px solid #e1e1e1;
display: none;
}
.menu-body a {
display: block;
width: 223px;
height: 38px;
line-height: 38px;
padding-left: 38px;
color: #777;
background: #fff;
text-decoration: none;
border-bottom: 1px solid #e1e1e1;
}
HTML代码
<body>
<ul class="menu-list">
<li>
<p class="menu-head">目标管理</p>
<div class="menu-body">
<a href="#">主题空间</a>
<a href="#">项目任务</a>
<a href="#">工作计划</a>
<a href="#">日程事件</a>
<a href="#">时间视图</a>
</div>
</li>
<li>
<p class="menu-head">会议管理</p>
<div class="menu-body">
<a href="#">主题空间</a>
<a href="#">会议安排</a>
<a href="#">待开会议</a>
<a href="#">已开会议</a>
<a href="#">会议资源</a>
</div>
</li>
<li>
<p class="menu-head">知识社区</p>
<div class="menu-body">
<a href="#">我的收藏</a>
<a href="#">知识广场</a>
<a href="#">文档中心</a>
<a href="#">我的博客</a>
<a href="#">文档库管理</a>
</div>
</li>
</ul>
</body>
JS代码第一代
$(function () {
// 鼠标经过
$('.menu-head').mouseover(function () {
// $(this) JQuery 当前元素
// 查找当前元素的，同级元素
$(this).siblings('.menu-body').show()
})
// 鼠标离开
$('.menu-head').mouseout(function () {
// $(this) JQuery 当前元素
$(this).siblings('.menu-body').hide()
})
})
JS代码第二代
利用 hover() 函数，合并鼠标的经过与离开的事件
hover( [over,] out )
参数：
- over：鼠标移到元素上要触发的函数
- out：鼠标移出元素要触发的函数
// 组合写法
$('.menu-head').hover(
// 鼠标经过
function () {
$(this).siblings('.menu-body').slideDown()
},
// 鼠标离开
function () {
$(this).siblings('.menu-body').slideUp()
});
JS代码第三代
利用 hover() 函数，合并鼠标的经过与离开的事件
hover( [over,] out )
只写一个参数，代表无论鼠标经过还是鼠标退出，都要执行这个函数
// 组合写法
$('.menu-head').hover(
// 鼠标事件，切换滑动
function () {
$(this).siblings('.menu-body').slideToggle()
}
)
版权声明：《 JQuery案例-下拉菜单 》为明妃原创文章，转载请注明出处！
最后编辑:2019-12-1 08:12:07