用js写菜单的下拉效果时，为什么鼠标悬停时没有下拉效果，求解

<!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>
<div class="container" id="container">

<div class="dt" id="dt">全部商品分类</div>
<div class="condd" id="condd">
    <div class="dd">家用电器</div>
    <div class="dd">手机数码</div>
    <div class="dd">户外运动</div>
    <div class="dd">办公家具</div>
    <div class="dd">食品生鲜</div>
</div>

</div>
<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>

我在你代码基础上稍加修改一下完成了你的效果

你代码的问题

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>

setTimeout内已经直接执行函数了，当然直接就出结果了，setTimeout内的changeheight不能带括号

【热门文章】