版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jerry11112/article/details/87064813
鼠标点击（click）实现效果：
如下图，从点击Dropdown有一个下拉过度的过程，这个也是很多OA系统用到的一个前端技术了，有兴趣的可以看一下哈
代码
css代码：
.dropdown {
width: 44px;
height: 20px;
}
.dropdown a {
text-decoration: none;
color: #000;
display: inline-block;
}
.dropdown > a {
border: 1px solid #000;
padding: 6px 12px;
}
/*//点击不实现过度*/
/*.dropdown-menu {
display:none;
width: 200px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #aaa;
box-shadow: 5px 5px 6px #000;
}*/
.dropdown-menu {
width: 150px;
height: 153px;
opacity: 0;
overflow: hidden; /*果内容溢出一个元素的框，会发生什么。*/
list-style: none;
margin: 0;
padding: 0;
/*border: 1px solid #aaa;*/
box-shadow: 5px 5px 6px #000; /*阴影*/
transition: all .5s linear; /*过度功能 无论是透明还是大小*/
}
.dropdown-menu a {
padding: 6px 10px;
width: 160px;
}
.dropdown-menu li:hover {
background: #ddd;
}
body里的内容
<body>
<h1>下拉菜单</h1>
<div class="dropdown">
<a data-trigger="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a href="#">选项一</a>
</li>
<li>
<a href="#">选项二</a>
</li>
<li>
<a href="#">选项三</a>
</li>
<li>
<a href="#">选项四</a>
</li>
</ul>
</div>
<script src="../js/jquery.js"></script>
<!--//单机按钮下拉
//找到data-trigger属性为dropdown的元素，绑定单机事件-->
<script>
$("[data-trigger=dropdown]").click
(function (e) {
e.preventDefault();
//封装this为jQuery对象$a
var $a = $(this);
//找到$a的下一个元素，保存在menu中
var $menu = $a.next(); //.nextElementSibling
if ($menu.css("height")=="153px") {
$menu.css({ height: 0, opacity:0}
}
else {
//jquery一次修改多个属性
$menu.css({ height: 153, opacity:1 });
//$menu.css("height", 153);
//$menu.css("opacity", 1);
}
})
</script>
</body>
鼠标进入（mouseover）实现效果：
css代码和上边一样，就下边的js代码不同：
<script>
//应该是父元素
$("[data-trigger=dropdown]").parent().mouseover(
function () {
var $div = $(this);
var $menu = $div.children().last(); //这里就是ul了，很巧妙
$menu.css({ height:153, opacity: 1 });
}
).mouseout(function () {
var $div = $(this);
var $menu = $div.children().last();
$menu.css({ height: 0, opacity: 0 });
})
</script>