<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>
效果图
点击一下出现/消失
时间： 2024-12-23 01:28:25