<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. [JS]Javascript对象与JSON的互转

    var obj = JSON.parse(json); //由JSON字符串转换为JSON对象 var json=JSON.stringify(obj); //将JSON对象转化为JSON字符 //此 ...

  2. CLR via C#笔记

    第一部分 CLR基础 CLR和JIT “运行时”如何解析类型引用 第二部分 设计类型 使用C#的is和as操作符来转型 运行时的相互联系 基元类型.引用类型和值类型 值类型的装箱和拆箱 哈希码 dyn ...

  3. laravel查询构造器中别名的问题

    Laravel框架对数据库的封装是比较完善的,用起来也比较方便.但之前有一个问题一直困扰着我,就是利用laravel作查询时.如果想给表名或是字段名起别名是比较麻烦的事.但翻阅它的文档不难发现,它提供 ...

  4. SOA 与 DDD

    SOA是技术架构方面,Evans DDD则是哲学方法论方面,所属方向不一样,或者说两者非常的无关.甚至是两个不同方向.使用DDD可以将系统从无到有到大建立起来,而大到一定程度,就需要SOA,整合异构. ...

  5. Yii2.0 数据库查询方法

    User::find()->all();    此方法返回所有数据:    User::findOne($id);   此方法返回 主键 id=1  的一条数据(举个例子):    User:: ...

  6. 织梦DEDECMS文章、栏目页获取当前页面顶级栏目名称的方法

    在用织梦做一些项目时,时常会碰到需要在当前页面调用顶级栏目名称的时候,织梦默认{dede:field name='typename' /} 可以获取当前栏目页上一级栏目的名称,而不是当前栏目顶级栏目名 ...

  7. MS Sql Server 中主从库的配置和使用介绍(转)

    网站规模到了一定程度之后,该分的也分了,该优化的也做了优化,但是还是不能满足业务上对性能的要求:这时候我们可以考虑使用主从库. 主从库是两台服务器上的两个数据库,主库以最快的速度做增删改操作+最新数据 ...

  8. [ActionScript 3.0] AS3.0 给flash事件传递参数的方法

    有时我们想要给flash内置的事件(比如MouseEvent)传递参数,这时我们可以用到下面的方法. import flash.events.MouseEvent; mc.addEventListen ...

  9. [Java] 过滤流BufferedInputStream和BufferedOutputStream

    package test.stream; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ...

  10. windows 下使用 zip安装包安装MySQL 5.7

    以下内容参考官方文档:http://dev.mysql.com/doc/refman/5.7/en/windows-start-command-line.html 解压缩zip到D:\mysql-5. ...