实现效果如下：
1. 简单实现：鼠标点击就出来，再点击就回去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dropdown控件</title>
<script src="js/jquery-1.12.4.js"></script>
<style type="text/css">
body,div,ul,li{
margin: 0;
padding: 0;
}
body{
padding:8px;
}
.dropdown a{
text-decoration: none;
color:#000;
display: inline-block;
}
.dropdown>a{
border:1px solid #000;
padding: 6px 12px;
}
.dropdown-menu{
list-style: none;
width: 200px;
height: 0;
opacity: 0;
border:1px solid #000;
box-shadow: 5px 5px 6px #000;
}
.dropdown-menu a{
padding: 6px 12px;
widows: 160px;
}
.dropdown-menu li:hover{
background-color: #ddd;
}
</style>
</head>
<body>
<div class="dropdown">
<a href="#" data-trigger="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something else</a></li>
<li><hr /></li>
<li><a href="#">Separted link</a></li>
</ul>
</div>
<script type="text/javascript">
// 1.找到dropdown，绑定单击事件
$('.dropdown>a[data-trigger=dropdown]').click(function(e){
e.preventDefault();
// 2.在单击事件里面：找到a后面的元素ul，控制ul的高度和透明度
var $a = $(this);
var $ul = $a.next();
// 判断当前ul的高度，以便于下一步操作
if(parseInt($ul.css('height')) >0 ){
$ul.css({
'height':0,
'opacity':0
});
}else{
$ul.css({
'height':153,
'opacity':1
})
}
});
//
</script>
</body>
</html>
2. 简单实现：鼠标移上去就出来
添加一下js代码即可：
$('.dropdown>a[data-trigger=dropdown]').mouseover(function(e){
var $a = $(this);
var $ul = $a.next();
$ul.css({
'height':153,
'opacity':1
})
}).$('.dropdown>a[data-trigger=dropdown]').mouseout(function(e){
var $a = $(this);
var $ul = $a.next();
$ul.css({
'height':0,
'opacity':0
})
});
网友评论