下拉菜单高度自适应实现过渡
在练习一个jq的小demo,发现高度过渡的时候不能实现自适应,因为过渡要求一个具体的值到另外一个具体的值,这就使得高度无法自适应了,网上查了很多文章都是max-height实现自适应,我觉得这样写法不太好。
效果:
用jq获取元素高度,实现过渡。下面是源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="js/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
word-spacing: -6px;
}
div {
display: inline-block;
width: 120px;
height: 26px;
background-color: #87d9fe;
border-left: 6px solid #67cbfc;
border-right: 6px solid #67cbfc;
text-align: center;
}
div ul {
background-color: #87d9fe;
transition: height .2s linear;
overflow: hidden;
}
div ul li {
margin-top: 3px;
}
</style>
<body>
<div>一级菜单1
<ul>
<li>一级菜单2</li>
<li>一级菜单3</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function() {
var height = $('ul').height();
$('ul').css('height','0px');
$('div').mouseleave(function() {
$(this).children('ul').css('height','0px');
})
$('div').mouseenter(function() {
$(this).children('ul').css('height',height+'px')
})
})
</script>
</html>