<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. 黄聪：wordpress如何使用get_avatar禁止调用gravatar头像，替换为自定义头像

    add_filter( 'get_avatar' , 'my_custom_avatar' , 1 , 5 ); function my_custom_avatar( $avatar, $id_or_ ...

  2. [jQuery]《锋利的jQuery》插件部分总结

    /** * <锋利的jQuery>插件部分总结 * * jQuery插件推荐命名:jquery.name.js * * $.fn.extend用于封装对象方法的插件 * $.extend用 ...

  3. Codeforces Round #359 (Div. 2)C - Robbers' watch

    C. Robbers' watch time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  4. 优化studio的速度

    随着Android Studio开发工具的逐渐成熟,越来越多的程序员选择这种IDE工具来进行开发,但是android studio在使用过程中有时候会出现卡顿问题.在赶项目的时候,遇到这类问题最是苦恼 ...

  5. UCOS-2 消息邮箱与队列

    一个有趣的网络解释: 信号量就是中央政府发给官人做一方大员的官印,有很多种官印但是不能一印多发,得到官印者才能掌权鱼肉一方百姓(任务得到信号量才能运行),否则你就只要等官跑官.(当然官印也可随时被政府 ...

  6. unix 中 ps -ef命令详解

    ps -ef 查看正在活动的进程 ps -ef |grep abc 查看含有"abc"的活动进程 ps -ef |grep -v abc 查看不含abc的活动进程 1)ps a 显 ...

  7. Ecshop（二次开发） - 后台添加左侧菜单导航

    1.链接地址:修改 admin\includes\inc_menu.php 文件. $modules['17_syn_data']['view_syn']        =    'synchroni ...

  8. JAVA 子父类的特点

    一.变量(属性)    this 代表当前对象的引用 this.变量 首先在本类中找所需要的这个变量,如果没有找到再去父类中找    super 用于访问当前对象的父类成员 super.变量 直接在父 ...

  9. java多线程之ThreadLocal

    ThreadLocal为每个线程保存变量,以保证数据同步. package Thread.Common; import java.util.Random; import java.util.concu ...

  10. ruby 字符串学习2

    在一个ruby字符串中包含表但是或者变量.想使用不同的值替换表达式或者变量 1 类似java 或者python的printf-style方式 template = 'Oceania has alway ...