HTML5--》点击显示隐藏内容

最新推荐文章于 2023-04-12 22:36:22 发布

kiz_calamus

最新推荐文章于 2023-04-12 22:36:22 发布

阅读量4.2k

点赞数

本文链接：https://blog.csdn.net/kids_calamus/article/details/82720211

版权

<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>

效果图

点击一下出现/消失

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kiz_calamus

关注关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML5--》点击显示隐藏内容

&#13; &lt;details&gt;浏览器支持比较差，可以用JavaScript实现这种功能。&#13;&#13; 1 &lt;!doctype html&gt;&#13; 2 &lt;html&gt;&#13; 3 &lt;head&gt;&#13; 4 &lt;meta charset="utf-8"&gt;&#
复制链接

扫一扫