单击控制展开和关闭的层[经典]

HTML代码

<style> #content,#intro{ font: 13px/25px; width: 200px; height: 40px; background: #eee; padding: 10px; border: 4px #ccc double; border-bottom:0; overflow: hidden; } #intro { color: #036; font:12px; border: 4px #ccc double; border-top:0; height:70px; } #key{color:#900;float:right} hr{height:1px;border:1px #ccc dotted} </style> <script> var s=5; var minheight=40; var maxheight=500; function shoppingcat(){ var key = document.getElementById("key").innerText; if(key=="展开"){ content.style.pixelHeight+=s; if(content.style.pixelHeight<maxheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="关闭"; } }else{ content.style.pixelHeight-=s; if(content.style.pixelHeight>minheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="展开"; } } } </script> <div id="content"> 孤雁儿 <br><br> 世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br> 藤床纸帐朝眠起，<br> 说不尽、无佳思。<br> 沈香烟断玉炉寒，<br> 伴我情怀如水。<br> 笛声三弄，<br> 梅心惊破，<br> 多少春情意。<br><br> 小风疏雨萧萧地，<br> 又催下、千行泪。<br> ×××人去玉楼空，<br> 肠断与谁同倚？ 一枝折得，<br> 人间天上，<br> 没个人堪寄。 </div> <div id="intro" ><hr>作者：李清照<span id="key" onclick="shoppingcat();">展开</span><br>来源 ：Rhyme.Tan的技术空间</div>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]