下拉列表菜单

内容
建立下拉列表需要显示的元素
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
为我们设置好的元素设置好css样式
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url('../../Content/imgs/bg.jpg');
}
.wrap li {
background-image: url('../../Content/imgs/libg.jpg');
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
带入jQuery插件
<script src="~/Content/js/jquery-3.2.1.min.js"></script>
把".wrap>ul>li"使用jQuery方法带入鼠标进入，离开事件
<script>
$(function () {
//mouseenter:鼠标进入事件
//mouseleave：鼠标离开事件
var $li = $(".wrap>ul>li");
//给li注册鼠标进入事件，让自己的ul显示出来
$li.mouseenter(function () {
//找到所有的儿子元素，并且还得是ul
//stop：停止当前正在执行的动画
$(this).children("ul").stop().slideDown();
});
$li.mouseleave(function () {
$(this).children("ul").stop().slideUp();
});
});
总结:这次的案例主要掌握鼠标进入(mouseenter)和离开(mouseleave)事件，下拉slideDown();,收起slideUp();这几个方法，还有在收起和下拉的使用方法前加上一个stop()不然上一个为执行完下一个跟着一起执行，这是我所学到的jQuery案例，所以我要分享给你们，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！