在H5中如何使用details元素和summary元素-H5教程-PHP中文網

首頁

web前端

H5教程

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

PHP中文网

Mar 30, 2017 pm 04:24 PM

是一个全新的HTML5元素，功能是描述文档某个部分的细节。

标记常与

标记配合使用。在默认情况下，不显示

中的内容。当与

标记配合使用时，在单击

标记后才会显示元素中设置的内容。

元素的常用属性如下所示：

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

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

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

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

标签包含了

元素的标题。在两者结合起来使用的代码中，

元素是

元素的第一个子元素，二者经常同时出现在页面中。

使用示例代码：

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

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

登入後複製

效果：

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

是不是特别方便？但是，目前只有Chrome和Safari浏览器支持

标签，所以这一效果现在还是用js实现。。。你可以试一试，这段代码在IE中是不起效果的。。。

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

介绍三个不常用的HTML元素：

、

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7500

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

h5是指什麼 Aug 02, 2023 pm 01:52 PM

H5是指HTML5，是HTML的最新版本，H5是一個功能強大的標記語言，為開發者提供了更多的選擇和創造空間，它的出現推動了Web技術的發展，使得網頁的交互和效果更加出色，隨著H5技術的逐漸成熟和普及，相信它將在互聯網的世界中發揮越來越重要的作用。

如何區分H5,WEB前端,大前端,WEB全端? Aug 03, 2022 pm 04:00 PM

本文帶你快速區分H5、WEB前端、大前端、WEB全棧，希望對需要的朋友有幫助！

h5如何使用position Dec 26, 2023 pm 01:39 PM

在H5中使用position屬性可以透過CSS控制元素的定位方式：1、相對定位relative，語法為「style="position: relative;」；2、絕對定位absolute，語法為「style="position: absolute; 」；3、固定定位fixed，語法為「style="position: fixed;」等等。

h5怎麼實現web端向上滑動載入下一頁 Mar 11, 2024 am 10:26 AM

實現步驟：1、監聽頁面的滾動事件；2、判斷捲動至頁面底部；3、載入下一頁資料；4、更新頁面捲動位置即可。

vue3怎麼實作H5表單驗證元件 Jun 03, 2023 pm 02:09 PM

效果圖描述基於vue.js，不依賴其他外掛程式或函式庫實作；基礎功能使用保持和element-ui一致，內部實作做了一些行動裝置差異的調整。目前建置平台使用uni-app官方腳手架構建，因為當下行動端大多情況就h6和微信小程式兩種，所以一套程式碼跑多端十分適合技術選型。實作思路核心api：使用provide和inject，對應和。在元件中，內部用一個變數（陣列）去將所有實例儲存起來，同時把要傳遞的資料透過provide暴露出去；元件則在內部用inject去接收父元件提供過來的數據，最後把自身的屬性和方法提交