js折叠代码[仅供新手学习] - 源码

标题: js折叠代码[仅供新手学习]
作者: thb @Ta
时间: 2015-02-09
点击: 2906
大部分手机是可以的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Thb"/>
    <meta name="keywords" content="keywords1,keywords2"/>
    <meta name="description" content="A simple example"/>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
    <style type="text/css">
        #list{
            list-style: none;
        }
        #list li{
            background:blue;
            background:-webkit-linear-gradient(top,#D5D8DE,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#A7B1BA);
            background:-moz-linear-gradient(top,#D5D8DE,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#A7B1BA);
            background:-o-linear-gradient(top,#D5D8DE,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#A7B1BA);
            background:-ms-linear-gradient(top,#D5D8DE,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#A7B1BA);
            background:linear-gradient(top,#D5D8DE,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#D7DDE2,#A7B1BA);
            height:50px;
            width:200px;
            font-family: '宋体','楷体';
            font-size: 20px;
            line-height: 50px;
            text-align: center;
        }
    </style>
    <title></title> 
</head>
<body>
	<ul id="list">
        <li>列表项目折叠</li>
        <li>列表项目</li>
        <li>列表项目</li>
    </ul>
    <script type="text/javascript">
        var list=document.getElementById('list').childNodes;
        var listitem=new Array();
        for(var i=0;i<list.length;i++){
            if(list[i].nodeName=='LI'){
                listitem[listitem.length]=list[i];
            }
        }
        var controler=listitem[0];
        controler.style.fontWeight='bold';
        function change(){
            function isZD(){
                var a=0;
                for(var i=0;i<listitem.length;i++){
                    if(listitem[i].style.display=='none'){
                        a++;
                    }
                }
                if(a){
                   return false;
                    
                }else{
                     return true;
                    
                }

            }
            if(isZD()){
                //展开状态变成折叠
                if(controler.innerText){
                    if(controler.innerText.indexOf('-')!==-1){
                        controler.innerText=controler.innerText.replace('-','+');
                    }else if(controler.innerText.indexOf('+')!==-1){

                    }else{
                       controler.innerText='+'+controler.innerText;
                    } 
                }else{
                    if(controler.textContent.indexOf('-')!==-1){
                        //有加号
                        controler.textContent=controler.textContent.replace('-','+');
                    }else if(controler.textContent.indexOf('+')!==-1){

                    }else{
                       controler.textContent='+'+controler.textContent;
                    }
                }
                for(var i=1;i<listitem.length;i++){
                            listitem[i].style.display='none';
                }
            }else{
                //折叠状态变成展开
                if(controler.innerText){
                    if(controler.innerText.indexOf('+')!==-1){
                        controler.innerText=controler.innerText.replace('+','-');
                    }else if(controler.innerText.indexOf('-')!==-1){

                    }else{
                       controler.innerText='-'+controler.innerText;
                    }
                }else{
                    if(controler.textContent.indexOf('+')!==-1){
                        controler.textContent=controler.textContent.replace('+','-');
                    }else if(controler.textContent.indexOf('-')!==-1){
                    }else{
                       controler.textContent='-'+controler.textContent;
                    }
                }
                for(var i=1;i<listitem.length;i++){
                            listitem[i].style.display='list-item';
                }
        }
    }
    change();
    //响应鼠标点击事件
    controler.onclick=change;
</script>
</body>
</html>
[隐藏样式|查看源码]