<!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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你代码的问题
jq的引入的目的不明
最后的
condd.style.height = 0没有加px你的
container范围太大，我这个代码只是给你示范，修改成了dt.onmouseout还有你的
vheight全局变量被污染，我这里没有给你解决，只是在onmouseout给你加上还原vheight你写的
setTimeout(changeheight(),50)里面的函数不应该写括号,可以去查查它的用法setTimeout内已经直接执行函数了，当然直接就出结果了，setTimeout内的changeheight不能带括号