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. 偶然发现的Unity3d，两点之间的距离计算。

    无意间查了一下Vector3的API,发现了一个方法. magnitude  Returen the length of vector(Read Only). 然后就试了一下这个方法. Vector3 ...

  2. PHP的单引号与双引号的区别

    字符串应用 单引号 较好! 在某些特定情况下,单引号的效率比双引号高. PHP把单引号中的数据视为普通字符串,不再处理. 而双引号还要对其中的字符串进行处理,比如遇到$了会把其后的内容视为变量等.

  3. VS2012使用NUGet自动下载(还原)项目中使用的包

    一: 当签出完整项目后,在解决方案名称上点右键,选择"启用NuGet程序包还原". 二: 出现询问,当然要点是,当完成后,会发现在解决方案中,多出".nuget" ...

  4. 【转载】Linux 与 BSD 有什么不同?

    原创:Linux中国 https://linux.cn/article-3186-1.html 原创:LCTT https://linux.cn/article-3186-1.html 本文地址:ht ...

  5. chmod 和 chown 的用法

    一.chown 命令 用途:更改文件的所有者或组.命令由单词change owner组合而成. 使用示例: 1,更改文件的所有者: chown jim program.c 文件 program.c 的 ...

  6. Curl http_code 状态码 意义及信息

    shell命令:curl -I -m 10 -o /dev/null -s -w %{http_code} http://test.com curl_init — 初始化一个curl会话curl_co ...

  7. cobbler自动安装脚本

    #!/bin/sh #coding=utf8 ################################################################## #将如下IP修改成你 ...

  8. Docker Dockerfile COPY vs ADD

    http://blog.163.com/digoal@126/blog/static/163877040201410341236664/   在Dockerfile中, 我们可以使用ADD和COPY拷 ...

  9. php self与static的区别

    self vs static 用一个demo来直接说明self与static的区别.self示例: <?phpclass Vehicle {    protected static $name ...

  10. 配置文件操作模块，configparser

    configparser configparser用于处理特定格式的文件,其本质上是利用open来操作文件. # 注释1 ; 注释2 [section1] # 节点 k1 = v1 # 值 k2:v2 ...