search

Home >Web Front-end >H5 Tutorial >在H5中如何使用details元素和summary元素

在H5中如何使用details元素和summary元素

PHP中文网
PHP中文网Original
2017-03-30 16:24:145819browse

a5e9d42b316b6d06c62de0deffc36939是一个全新的HTML5元素，功能是描述文档某个部分的细节。a5e9d42b316b6d06c62de0deffc36939标记常与631fb227578dfffda61e1fa4d04b7d25标记配合使用。在默认情况下，不显示a5e9d42b316b6d06c62de0deffc36939中的内容。当与631fb227578dfffda61e1fa4d04b7d25标记配合使用时，在单击631fb227578dfffda61e1fa4d04b7d25标记后才会显示ba7e6f61132c3f05a3b4f243abe25d65元素中设置的内容。a5e9d42b316b6d06c62de0deffc36939元素的常用属性如下所示：

1）open:值为open，功能是定义details是否可见。

2）subject:值为sub_id，功能是设置元素所对应项目的ID号。

3）draggable:值为true或false，功能是设置是否为可拖动元素，默认值是false。

a5e9d42b316b6d06c62de0deffc36939标记的本质上允许我们在单击标签时显示和隐藏内容。

631fb227578dfffda61e1fa4d04b7d25标签包含了a5e9d42b316b6d06c62de0deffc36939元素的标题。在两者结合起来使用的代码中，631fb227578dfffda61e1fa4d04b7d25元素是a5e9d42b316b6d06c62de0deffc36939元素的第一个子元素，二者经常同时出现在页面中。

使用示例代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<details open="open">
   <summary>页面说明</summary>
   今天是2016年7月20号
</details>
</body>
</html>

效果：

1.png

点击小三角形之后，文字隐藏：

2.png

是不是特别方便？但是，目前只有Chrome和Safari浏览器支持a5e9d42b316b6d06c62de0deffc36939标签，所以这一效果现在还是用js实现。。。你可以试一试，这段代码在IE中是不起效果的。。。

相关文章：

HTML5每日一练之details展开收缩标签的应用

介绍三个不常用的HTML元素：a5e9d42b316b6d06c62de0deffc36939、631fb227578dfffda61e1fa4d04b7d25、a38fd2622755924ad24c0fc5f0b4d412

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML 5的10个顶级资源Next article：HTML5 Canvas 颜色选择器

Related articles

See more