details是h5新增的交互元素，details与 summary 标签配合使用可以为 details 定义标题。默认情况下，不显示 details 标记中的内容。当用户点击标题时，会显示出 details。

details元素的常用属性如下： 
open:值为open，功能是定义details是否可见。 
subject:值为sub_id，功能是设置元素所对应项目的ID号。 
draggable:值为true或false,功能是设置是否可以拖动元素，默认值是false。

简单的details示例：

效果如下：

h5交互元素details标签的更多相关文章

  1. 【HTML5】用脚本控制交互元素details元素的使用

    1.源码 <!. Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo ...

  2. HTML（二）HTML元素（整体结构，块级元素，内联元素，结构元素，交互元素，元素嵌套规则）

    HTML整体结构解释 <!DOCTYPE html> // 文件应以"<!DOCTYPE ......>"首行顶格开始,推荐使用"<!DOC ...

  3. HTML5新增元素、标签总结

    总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...

  4. H5新增语义化标签

    一.根据页面的结构,由div派生的标签. <header> <footer> <nav> 导航 在H4中导航栏一般用ul-li标签,H5中可以直接用<nav& ...

  5. HTML5新增元素，标签总结

    总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...

  6. HTML5 <details> 标签

    HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...

  7. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  8. Native与H5交互的一些解决方法

    一. 原生代码中直接加载页面 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webVi ...

  9. iOS与H5交互

    H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互.技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回,反向可以处理异步回调 ...

随机推荐

  1. EF-CodeFirst-2玩的嗨

    时间戳.复杂类型.GUID自增长 GUID自增长 GUID用于当主建那是好处多多,但是和int不同.EF不会自动识别第一个为类名+Id开头或int类型字段 去设置自增长.尴尬的GUID怎么玩呢.. D ...

  2. C#用正则表达式对IP进行排序

    static void Main(string[] args) { string IPs = " 192.168.1.1 202.47.4.6 1.2.3.3 "; Console ...

  3. DropZone

    JavaScript 文件拖拽上传插件 dropzone.js 介绍 February 19, 2014 / 编程指南 dropzone.js 是一个开源的 JavaScript 库,提供 AJAX ...

  4. 强大的windbg定位内存泄露，两句命令搞定！

    1.简单配置在windbg程序目录下有个gflags.exe,运行后设置: 运行CMD.EXE,输入"D:\Debugging Tools for Windows (x86)\gflags. ...

  5. hdu 1863 - 畅通工程(MST)

    畅通工程 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  6. android toast几种使用方法

    toast经常会用到,今天做个总结,特别是自定义toast的布局,值得一看. 一.默认展示 // 第一个参数:当前的上下文环境.可用getApplicationContext()或this // 第二 ...

  7. BZOJ4415: [Shoi2013]发牌

    显然可以线段树或树状数组上二分. 然而直接写splay在bzoj上并不会T. 然而发这题的目的只是因为我又忘了return了啊啊啊啊(TдT) 内心十分崩溃.关键是在本地还能过. #include&l ...

  8. mysql 数据库怎样快速的复制表以及表中的数据

    1.copy表结构 SHOW CREATE TABLE runoob_tbl:(选择你要复制的表),copy 它的创建语句,执行即可创建表结构相同的表了,记得改名称哦. 2.copy表数据 选择你要插 ...

  9. MongoDb学习1

    目标框架必须是 4.5以上,最新MongoDb.Driver 是 2.2.4(与MongoDb.Driver 的1.x版本差别较大) 官方文档 http://mongodb.github.io/mon ...

  10. MySQL------Navicat激活方法

    转载: http://www.jianshu.com/p/b1f9194e1e31