查看更多 详细介绍+点击收起 效果 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>



<DIV id=soft_instr name="soft_instr">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
1111111111<br />
22222222222<br />
3333333333<br />
444444444444<br />
5555555555555<br />
666666666666666666<br />


</DIV>


<DIV id=comm_1 name="comm_1"></DIV>
<DIV id=comm_2 style="DISPLAY: none" name="comm_2"></DIV>    
<DIV id=comm_3 style="DISPLAY: none;" name="comm_3">
    <SPAN>
        <INPUT onclick="this.value==='详细介绍'?this.value='点击收起':this.value='详细介绍';show_brief();" type=button value="详细介绍" name=botton>
    </SPAN>
</DIV>


<SCRIPT type=text/javascript> 
        document.getElementById('comm_1').innerHTML=document.getElementById('soft_instr').innerHTML; 
        document.getElementById('comm_2').innerHTML=document.getElementById('soft_instr').innerHTML; 
       
       function show_brief(){
            var obj1=document.getElementById('comm_1');
            var obj2=document.getElementById('comm_2');
            if(obj1.style.display==""){
                obj1.style.display="none";       
                obj2.style.display="";   
                 obj2.innerHTML=document.getElementById('soft_instr').innerHTML;
            }else{
                obj2.style.display="none";
                obj1.style.display="";
                 obj1.innerHTML=document.getElementById('soft_instr').innerHTML; 
            }
            
       }
            
             var _h=document.getElementById('comm_1').offsetHeight;
              document.getElementById('soft_instr').style.display="none";
 
            if(_h > 200){
                document.getElementById('comm_1').style.height="107px";
                document.getElementById('comm_1').style.overflow="hidden";
                document.getElementById('comm_3').style.display="block";
            }
           
    </SCRIPT>


</body>
</html>

 

posted @ 2012-06-14 18:34  网络爱上点击  阅读(1745)  评论(0)  编辑  收藏  举报