从后台拉取到的数据,动态的为每条数据设置展开/折叠状态

html

<div id="cs_wrap"></div>

css

.on{display: block}
.off{display: none}
.wrap{
    margin:15px 300px;
    padding: 0;
    border: 1px solid #E8E8E8;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #E8E8E8;
    -webkit-box-shadow: 0 1px 1px #E8E8E8;
    box-shadow: 0 1px 1px #E8E8E8;
    background-color: #f9f8f7
}
.head{
    border-bottom: 1px solid #E8E8E8;
    padding:12px;
    background-color: #ffffff;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.body{
    height: 200px;
    border: 1px solid #dcdcdc;
}

js

/////////////////////////////////////////////
var control_show=new Object();
function judge_object(body){
    var csObject=control_show[body];
    if(csObject){
        return csObject['status'];
    }
    else{
        control_show[body]=new Object();
        control_show[body]['status']=1;//初始化打开
        return control_show[body]['status'];
    }
}
//////////////////////////////////////////////
function init(){
    $.ajax({
        type:"post",
        url:"cs.php",
        data:"action=get",
        success:function(result){
            var htmlStr = "";
            var len = result.length;
            for(var i=0;i<len;i++){
                var class_name='body ';
                var flag;
                flag=judge_object("body_"+i);
                if(flag==1){
                    class_name+='on';
                }else{
                    class_name+='off';
                }
                htmlStr+="<div class='wrap'>" +
                             "<div class='head'><button onclick='toggle(this)'>显示/折叠</button></div>" +
                             "<div class='"+class_name+"' id='body_"+i+"'>"+result[i].dev_name+"</div>" +
                          "</div>"
            }
            $("#cs_wrap").html(htmlStr);
        }
    })

}
init();
var timeer = window.setInterval(function(){
    init();
},2000)

function toggle(obj){
     $(obj).parent().next().slideToggle();
    var bodyID = $(obj).parent().next().attr("id");
    control_show[bodyID]['status']= control_show[bodyID]['status']==1?0:1;
}

php f返回的数据类型

[{"dev_name":"ram"},{"dev_name":"usb"},{"dev_name":"flash"}]

你可能感兴趣的:(从后台拉取到的数据,动态的为每条数据设置展开/折叠状态)