<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>menu</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 500px;
margin: 100px auto;
overflow: hidden;
}
.dt,.dd{
width: 300px;
height: 30px;
line-height: 30px;
background-color: brown;
color: #eeeeee;
text-align: center;
}
.condd{
width: 300px;
position: relative;
}
</style>
<script type="text/javascript" src = "js/jquery-1.11.2.js"></script></head>
<body>
<p class="container" id="container">
<p class="dt" id="dt">全部商品分类</p>
<p class="condd" id="condd">
<p class="dd">家用电器</p>
<p class="dd">手机数码</p>
<p class="dd">户外运动</p>
<p class="dd">办公家具</p>
<p class="dd">食品生鲜</p>
</p></p>
<script>
var container = document.getElementById('container');
var dt = document.getElementById('dt');
var condd = document.getElementById('condd');
var timer;
var vheight = 0;
condd.style.height = '0px';
container.onmouseover = function(){
changeheight();
};
function changeheight(){
if(condd.offsetHeight<=150){
vheight += 10;
condd.style.height = vheight+"px";
setTimeout(changeheight(),1000);
}
}
container.onmouseout = function(){
// condd.style.display = "none";
condd.style.height = 0;
};</script>
</body>
</html>
黄舟2017-04-10 16:51:45
我在你代码基础上稍加修改一下完成了你的效果
jq的引入的目的不明
最后的condd.style.height = 0没有加px
你的container范围太大，我这个代码只是给你示范，修改成了dt.onmouseout
还有你的vheight全局变量被污染，我这里没有给你解决，只是在onmouseout给你加上还原vheight
你写的setTimeout(changeheight(),50)里面的函数不应该写括号,可以去查查它的用法
<script>
var container = document.getElementById('container');
var dt = document.getElementById('dt');
var condd = document.getElementById('condd');
var timer;
var vheight = 0;
condd.style.height = '0px';
dt.onmouseover = function(){
changeheight();
};
function changeheight(){
if(condd.offsetHeight<=150){
vheight += 10;
condd.style.height = vheight+"px";
setTimeout(changeheight,50);
}
}
dt.onmouseout = function(){
vheight =0;
condd.style.height = 0+'px';
};
</script>