问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
ruhua
    24833648

    <!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>

    javascript
    阅读 3.7k
    2 个回答
    得票最新
    头像
    小深刻的秋鼠
      30124
      ✓ 已被采纳

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

      你代码的问题

      • 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>
      头像
      JMwill
        1522

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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题