cari

Rumah  >  Soal Jawab  >  teks badan

javascript - 用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>
<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>

巴扎黑巴扎黑2897 hari yang lalu254

membalas semua(2)saya akan balas

  • 黄舟

    黄舟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>

    balas
    0
  • 阿神

    阿神2017-04-10 16:51:45

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

    balas
    0
  • Batalbalas