<details>瀏覽器支持比較差，可以用JavaScript實現這種功能。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js點擊顯示隱藏內容</title> 6 <style type="text/css" > 7 body{font-size:12px;} 8 span{font-weight:bold;} 9 details{ 10 overflow:hidden; 11 height:0; 12 padding-left:200px; 13 position:relative; 14 display:block; 15 } 16 details[open]{height:auto;} 17 </style> 18 </head> 19 20 <body> 21 <span onClick="spanClick();">點擊顯示內容</span> 22 <details id="details1"> 23 www.calamus.cn 24 </details> 25 <script> 26 function spanClick(){ 27 var obj=document.getElementById("details1"); 28 var att=obj.getAttribute("open"); 29 if(att!="open"){ 30 obj.setAttribute("open","open"); 31 } 32 else{ 33 obj.removeAttribute("open"); 34 } 35 } 36 </script> 37 </body> 38 </html>
效果圖
點擊一下出現/消失
