侧边栏收缩效果

//侧边栏收缩效果
    function aa(bb){
    var bb=document.getElementById('div1');
        cc=document.getElementById('div2');
    if(bb.hasAttribute('class')){
        cc.innerHTML='&lt&lt';
        bb.removeAttribute('class');
    }else{
        cc.innerHTML='&gt&gt';
        bb.setAttribute('class','zz');
    }
    }
    </script>
    <style type="text/css">
    *{padding:0;margin:0;}
    .zz{display:none}
    #div1{width:50px;height:35px;background:#666;float:left;line-height:30px;text-align:center;}
    #div2{width:25px;height:35px;background:red;float:left;cursor:pointer; line-height:30px;text-align:center; }
    #div3{width:50px;height:35px;background:green;float:left;line-height:30px;text-align:center;}
    </style>
    <div id="div1">详情</div>
    <div id="div2" onclick="aa(this)">&lt&lt</div>
    <div id="div3">简介页</div>

 

posted @ 2017-04-03 01:13  嗯嗯大侠  阅读(697)  评论(0编辑  收藏  举报