首页手记 js实现jq的slide Toggle

js实现jq的slide Toggle

标签：

JQuery JavaScript

js实现jq的slide Toggle

看demo：http://xiaoxina.cn/demo/js&slideToggle.html

特点：

不用设置下拉的高度自动获取
兼容所有主流浏览器及IE6-8
调用方便

代码：


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>小鑫博客 - www.xiaoxina.cn</title>

<style>

.wrap {

width: 800px;

height: auto;

background: #2EA2DE;

margin: 150px auto;

}



.ul {

width: 100px;

height: auto;

overflow: hidden;

float: left;

}



.title {

width: 100px;

height: 30px;

line-height: 30px;

background: #2EA2DE;

color: #fff;

text-align: center;

}



.content {

    width: 100px;

    height: auto;

    background: #2b96cc;

    position: relative;

    text-align: center;

    overflow: hidden;

}



.content a {

display: block;

color: #fff;

margin: 8px 0;

text-decoration: none;

}

</style>

</head>

<body>

<div class="wrap">

<div class="ul">

<div class="title">这是标题</div>

<div class="content">

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

</div>

</div>

<div class="ul">

<div class="title">这是标题</div>

<div class="content">

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

</div>

</div>

<div class="ul">

<div class="title">这是标题</div>

<div class="content">

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

</div>

</div>

<div class="ul">

<div class="title">这是标题</div>

<div class="content">

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

<a href="http://www.xiaoxina.cn">小鑫博客</a>

</div>

</div>

</div>



    <!--兼容浏览器的getClassName-->

    <script src="http://www.xiaoxina.cn/js/getClassName.js" charset="UTF-8"></script>

<script>

var ul = getClassName('ul');

var ct = getClassName('content');

var ctH = [];



for(var j=0;j<ul.length;j++) {

    // 获取下拉菜单的高度

    ctH.push(ct[j].offsetHeight)

    // 重置下拉菜单的高度

    ct[j].style.height = 0;

}



for(var i=0;i<ul.length;i++) {

    ul[i].id = i;



    ul[i].onmouseover = function() {

     // 获取触摸的id值

        var id = this.id;

        setHeight(id, ctH[id], 1, 1);

    }



    ul[i].onmouseleave = function() {

        var id = this.id;

        setHeight(id, 0, -1, 1)

    }

}

        

        // 参数：

        //      id     当前触摸的id

        //      end    指定高度暂停(默认是当前高度)

        //      step   每1毫秒增加多少高度

        //      time   指定的间隔时间

function setHeight(id, end, step, time) {

    clearInterval(ct[id].timer);

    ct[id].timer = setInterval(function() {

        if (ct[id].offsetHeight === end) {

            clearInterval(ct[id].timer)

        }else {

            ct[id].style.height = ct[id].offsetHeight + step + 'px';

            console.log(end);

            console.log(ct[id].offsetHeight)

        }

    },time);

}

</script>

</body>

</html>