手风琴切换效果

Posted 慕容冰菡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手风琴切换效果相关的知识,希望对你有一定的参考价值。

手风琴切换效果

代码:

CSS代码:
.acco_box {
    width:400px;
    border:1px solid #a0b3d6;
}
.acco_title {
    line-height:26px;
    padding-left:10px;
    font-size:14px;
    background-color:#cadbeb;
    border-bottom:1px solid #beceeb;
}
.acco_title_on {
    background-color:#beceeb;
}
.acco_content {
    height:0;
    padding:0 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    overflow:hidden;
}

 

html代码:
<div class="acco_box">
    <div class="acco_title acco_title_on" lang="accoContent_1">► 一个普通的文本的段落</div>
    <div id="accoContent_1" class="acco_content" style="height:140px;">
        <p>黄药师选婿,让郭靖和欧阳克各写一篇作文。郭靖绞尽脑汁写足五百字,心头惴惴,不料欧阳克只写了一百四十字,郭靖轻松获胜。欧阳锋大怒,一耳光甩在欧阳克脸上:"s b!叫你天天写微博!" </p>
    </div>
    <div class="acco_title" lang="accoContent_2">► 一个有个小图的段落</div>
    <div id="accoContent_2" class="acco_content">
        <p><img class="headimg" src="http://image.zhangxinxu.com/image/study/head/s50/20.jpeg" />11月24日消息,盛大旗下网站游玩网(www.uvan.com)将于11月25日正式改名为切客网,并启动新域名www.qieke.com。这也意味着游玩网将从原来的旅游社区进一步向LBS方向转型。 游玩网于今年8月正式公测,融入了微博功能,并提供基于位置的服务(LBS),是典型的"Twitter+Foursquare"模式。 </p>
    </div>
    <div class="acco_title" lang="accoContent_3">► 纯粹两段文字</div>
    <div id="accoContent_3" class="acco_content">
        <p>FlowReaer今天已经在App Store上架了,请各位未越狱的朋友到App Store免费下载。</p>
        <p>这个应用和新版的QQ阅读有点像,算是中文版的Flipboard应用,Flipboard支持的是Twitter,FlowReaer则支持新浪微博。</p>
    </div>
</div>

 

JS代码:
//简单的类/ID选择器
var $$ = function (selector) {
    var cl, id, alls, arrEle = [];
    if (/^\\./.test(selector)) {
        cl = selector.replace(".", "");
        alls = document.getElementsByTagName("*"), l = alls.length;
        for (var i=0; i<l; i+=1) {
            var name =     alls[i].className, arrName = [];
            if (name) {
                arrName = name.split(" "), lName = arrName.length;
                for (var j=0; j<lName; j+=1) {
                    if (arrName[j] === cl) {
                        arrEle.push(alls[i]);    
                    }
                }
            }
        }
    } else if (/^#/.test(selector)) {
        id = selector.replace("#", "");
        var o = document.getElementById(id);
        if (o) {
            arrEle.push(o);    
        }
    }
    return arrEle;
};
//点击方法
Array.prototype.click = function(fn) {
    var l = this.length;
    if (l) {
        for (var i=0; i<l; i+=1) {
            this[i].onclick = function() {
                fn.call(this);
            };
        }
    }
};
//执行点击
$$(".acco_title").click(function() {
    var rel = this.lang, cl = this.className, oOn = $$(".acco_title_on")[0], rel_on = oOn.lang;
    if (!/on/.test(cl) && rel && rel_on) {
        $$("#" + rel)[0].style.height = "140px";
        $$("#" + rel_on)[0].style.height = "0";
        this.className = "acco_title acco_title_on";
        oOn.className = "acco_title";
    }
});

 

效果:

 

以上是关于手风琴切换效果的主要内容,如果未能解决你的问题,请参考以下文章

JS实现手风琴效果

响应式手风琴效果导航

214 jQuery案例:王者荣耀手风琴效果

手风琴效果

常用的几个JQuery代码片段

jquery实现手风琴效果