<details>浏览器支持比较差，可以用JavaScript实现这种功能。

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>js点击显示隐藏内容</title>

 <style type="text/css" >

 body{font-size:12px;}

 span{font-weight:bold;}

 details{

     overflow:hidden;

     height:0;

     padding-left:200px;

     position:relative;

     display:block;

     }

 details[open]{height:auto;}

 </style>

 </head>

 <body>

 <span onClick="spanClick();">点击显示内容</span>

 <details id="details1">

 www.calamus.cn

 </details>

 <script>

 function spanClick(){

     var obj=document.getElementById("details1");

     var att=obj.getAttribute("open");

     if(att!="open"){

         obj.setAttribute("open","open");

         }

     else{

         obj.removeAttribute("open");

         }

     }

 </script>

 </body>

 </html>

效果图

点击一下出现/消失

HTML5--》点击显示隐藏内容的更多相关文章

  1. JS点击显示隐藏内容

    JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...

  2. EditTextPreference点击后输入框显示隐藏内容，类似密码输入(转)

    http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接]     aski ...

  3. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. js点击显示隐藏

    这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...

  5. Android TextView内容过长加省略号，点击显示全部内容

    在Android TextView中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中:android:ellipsize="end"    省略号在结尾an ...

  6. js 事件点击 显示 隐藏

    <div style="position:absolute;left:40%;top:10%;border-style:dotted"> <img src=&qu ...

  7. js勾选时显示相应内容

    使用环境,一.比如用户勾选时显示一些安全方面提示“你真的要自动登录吗?这将使你下次不需要密码即可进入你的个人中心.”二.显示其他预设选项,以方便用户选择输入,比如密保问题设置,当用户不想使用自定义设置 ...

  8. 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  9. HTML5+CSS3点击指定按钮显示某些内容效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. python（13）线程池：threading

    先上代码: pool = threadpool.ThreadPool(10) #建立线程池,控制线程数量为10 reqs = threadpool.makeRequests(get_title, da ...

  2. [实变函数]2.1 度量空间 (metric space), $n$ 维 Euclidean 空间

    1 回忆:    $$\bex    \lim_{n\to\infty}a_n=a\lra \forall\ \ve>0,\ \exists\ N,\ \forall\ n\geq N,\mbo ...

  3. HTTP Get请求URL最大长度

    各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下: IE6.0                :url最大长度2083个字符,超过最大长度后无法提 ...

  4. vim操作笔记

    1.切换到下一个文件 假设要切换的文件名为 test.py :ex test.py 2.文档内复制命令 yy "复制光标所在行.或大写一个Y. 2yy "复制两行. y^ &quo ...

  5. tiny210裸机第1课(启动原理)

    软硬件环境 宿主机系统:ubuntu 板子芯片:S5PV210(Contex-A8),512M DDR2,512M SLC Nand 交叉编译器:arm-linux-gcc-4.5.1 手册:S5PV ...

  6. Jenkins参数化构建

    背景:每次构建项目时都需要去修改一下配置,然后保存,再去立即构建.这样修改容易修改出错误,影响到执行脚本,且每次都要去修改配置,不容易修改,操作也比较麻烦.所以决定将Jenkins修改为参数化构建.下 ...

  7. 怎么在logcat中显示system.com.print中的打印信息

    在logcat中显示信息可以用Log.v() Log.d() Log.i() Log.w() 以及 Log.e() 1.Log.v 的调试颜色为黑色的,任何消息都会输出: 2.Log.d的输出颜色是蓝 ...

  8. context.Request.Files为NULL问题

    在实现图片上传功能的时候出现在ashx等处理页面出现context.Request.Files为NULL异常,有几点需要注意: 1.在客户端可以将form用submit提交,如下: <%@ Pa ...

  9. Inno Setup中做补丁通过注册表获取原程序安装目录

    今天找VM补丁看到的,是个innosetup封装的,所以习惯性的喜欢去看人家的iss文件是怎么编写的. DefaultDirName={reg:HKLM\SOFTWARE\VMware%2c%20In ...

  10. 页面设计--Tree目录树

    Tree目录树控件属性: 根据数据集合来配置相应的信息 加载模式有自动加载.自定加载 web中显示效果图: