javascript - 用js写菜单的下拉效果时,为什么鼠标悬停时没有下拉效果,求解
巴扎黑
巴扎黑 2017-04-10 16:49:45
[JavaScript讨论组]




menu



全部商品分类

家用电器

手机数码

户外运动

办公家具

食品生鲜




巴扎黑
巴扎黑

全部回复(2)
黄舟

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

你代码的问题

  • 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不能带括号

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号