jQuery实现展开伸缩效果

jQuery实现简单的展开伸缩效果

展开伸缩效果不论是在电脑上还是在手机端都应用的十分广，那么今天就实现一个这样的效果，首先贴下图

• 展开之前的样子

• 展开之后的样子

好了，下面开始写实现过程了

1.首先将页面的结构写出来，结构比较简单，就不多说了

<div class="m-box">
        <div class="m-list">
            点击试一下，会出现什么呢？
            <div class="icon-list"></div>
        </div>
        <!-----------展开的内容---------->
        <div class="m-content">
            <small>哈哈，看到我了吧；</small><br>
            <small>哎呦，不错哦；</small><br>
            <small>哈哈哈哈哈哈哈哈哈哈哈哈哈哈。</small>
        </div>
        <!-----------展开的内容 End---------->

        <br><hr><br>

        <div class="m-list">
            点击我可以展开哦
            <div class="icon-list"></div>
        </div>
        <!-----------展开的内容---------->
        <div class="m-content">
            <small>展开内容1</small><br>
            <small>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵；</small><br>
            <small>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</small>
        </div>
        <!-----------展开的内容 End---------->
    </div>

2.写好css样式，这里面要注意的就是.active了，用来切换图标用的，后面介绍它的用法

*{margin: 0;padding: 0}
body{
    margin: 100px;
}

.m-box{
    width: 80%;
    background-color: #c1e2b3;
    padding: 20px;
    overflow: hidden;
}
.m-list{
    height: 48px;
    line-height: 48px;
    cursor: pointer;
}


.icon-list{
    width: 48px;
    height: 48px;
    float: right;
    background-image: url("../images/iconfont-right.png") ;
    cursor: pointer;
}

hr{
    width: 100%;
    height: 1px;
    border: none;
    border-bottom: 1px solid #888;
}

.m-content{
    display: none;
}

.active{
    background-image: url("../images/iconfont-unfold.png") ;
}

3.最重要的步骤来了，通过jQuery来完成这种效果，切换图标这里介绍两种不同的方法

• 首先看一下主要的函数

$(function () {
        var icon=$('.icon-list');
        $('.m-list').click(function () {
            $(this).next('div').slideToggle();
            changeIcon($(this).children(icon));
        });
    });

这里通过点击m-list这个类完成两个动作，展开收缩效果和图标的切换。展开收缩主要用到了jQuery的slide动画，通过slideToggle（）方法实现。然后是切换图标，我这里写了两个方法，分别介绍下。

• 第一种方法，通过indexof（）函数实现

function changeIcon(mainNode) {
        if (mainNode) {
            if (mainNode.css("background-image").indexOf("iconfont-right.png") >= 0) {
                mainNode.css("background-image","url('images/iconfont-unfold.png')");
            } else {
                mainNode.css("background-image","url('images/iconfont-right.png')");
            }
        }
    }

这是什么意思呢？indexOf（） 方法可返回某个指定的字符串值在字符串中首次出现的位置。字符串位置是从0开始的，如果要检索的字符串值没有出现，则该方法返回 -1。
比如：

var str="hello world";
    alert(str.indexOf('hello'));  //返回0
    alert(str.indexOf('world'));  //返回6，注意：从0开始计算，空格算一个字符
    alert(str.indexOf('helloworld'));//返回-1，因为str中不包含该字符串

好了，利用indexof（）的这种特性就可以完成我们的需求了。首先background-image的值是iconfont-right.png，所以返回的值是0，执行 mainNode.css(“background-image”,”url(‘images/iconfont-unfold.png’)”);这句话，切换背景图片。当背景改为iconfont-unfold.png后，返回的值是-1，执行下面一句话，又将背景切换回去，就可以完成一直这样不停的切换效果了。

• 第二种方法，利用三目运算符和css结合使用，达到切换的效果

function changeIcon2(mainNode){
        if(mainNode){
            var _active=mainNode.hasClass('active');
            _active?mainNode.removeClass('active'):mainNode.addClass('active');
        }
    }

前面说到的active类在这里起到了很大的作用。.icon-list这个类中开始没有active类，执行mainNode.addClass(‘active’);这句话，为它添加active这个类

.active{
    background-image: url("../images/iconfont-unfold.png") ;
}

应用该样式后覆盖它本身的样式，改变图标。当它有active这个类之后，点击执行mainNode.removeClass(‘active’)；这句话，移除掉active这个类，以达到切换图标的效果。

总结：虽然这种效果实现过程蛮简单的，但是方法有很多种，试着自己去想一想不同的方法来实现还是蛮有乐趣的，最后附上Demo的下载地址：

http://download.csdn.net/detail/a46262563/8999937