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

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

details标签的出现，为我们带来了更好的用户体验，不必为这种收缩展开的效果再编写JS来实现。

注：目前仅Chrome支持此标签。

details有一个新增加的子标签——summary，当鼠标点击summary标签中的内容文字时，details标签中的其他所有元素将会展开或收缩。

detalis标签：

案例1：

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

HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!

HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛

如果details中不存在summary标签会怎样呢，其实当details元素内没有summary标签的时候，浏览器在解析的时候会提供一个默认的文字，比如“查看详细”诸如此类的本地化文字，浏览器同样再会提供一个诸如上下箭头之类的图标。比如下面的案例2就是一个不存在summary子标签的例子。

案例2：

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

HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛

有的时候，我们需要detalis中的内容默认为展开状态怎么办？

其实HTML5也已经为我们想到了，如果有着方面的需求，我们只需要加入一个属性即可，如案例3。

Open属性：

将案例1的代码修改后如下：

案例3：

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

HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!

HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛

以上就是HTML5每日一练之details展开收缩标签的应用的内容，更多相关内容请关注PHP中文网(www.php.cn)！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

php 收缩栏,HTML5每日一练之details展开收缩标签的应用相关推荐

每日一练丨性能优化-实例优化（三）
墨墨导读:本文出自墨天轮"每日一练"专栏,此专栏已连更84天,欢迎关注https://www.modb.pro/topic/26446(复制到浏览器中打开或者点击"阅读原 ...
【每日一练】100—一个渐变色计数器列表的实现
文 | 杨小爱写在前面今天我们迎来了[每日一练]栏目的第100个练习,在这几个月的持续练习中,我不知道,你学到了什么?是持续学习的习惯,还是前端基础知识? 但是,不管怎么样,只要持续的去做去学习自 ...
产品周报第35期｜APP端学习门户上线、每日一练新增编程题型、专栏显示订阅来源……
hello,大家好,这里是「CSDN产品周报」第35期.本次更新主要涉及首页.动态.学习.问答,欢迎大家详细了解和使用. 一.CSDN排行榜更新 1.增加原力年榜 2.热榜算法更新:增加对含有违规图片 ...
Python每日一练0023
问题如何判断一个文件是否存在解决方案这个问题可以分成几类问题如果这里的文件指的是文件或目录,我们可以用os.path.exists()方法 >>> import os > ...
WindowsAPI每日一练(2) 使用应用程序句柄
WindowsAPI每日一练系列 :https://www.cnblogs.com/LexMoon/category/1246238.htmlWindowsAPI每日一练(1) WinMain Win ...
python题目关于企业利润_【每日一练】巧用python实现利润计算
原标题:[每日一练]巧用python实现利润计算相信很多小伙伴都遇到过阶梯利率的问题,比如说银行的利息计算,不同阶段的本金有不同的利率:税务的税费计算,不同的营收有不同的缴纳率:个人的提成,不同的销 ...
Python每日一练0004
问题如何保存迭代对象的最后N个元素例如保存列表['a', 'b', 'c', 'd']的最后2个元素或者保存某个迭代器对象的最后5个元素解决方案对于列表.元组这样的数据结构,可以使用切片来很 ...
python 编程一日一练-python每日一练
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 过滤掉列表中的负数筛选出字典{lilei: 79,jim: 88,lu ...
python 编程一日一练-「每日一练」巧用python生成随机数
原标题:「每日一练」巧用python生成随机数随机数在我们的生产和生活中有很多的应用场景,比如说登录验证的随机数字等等,那么你知道在Python中怎么生成随机数吗? 往下看,就是这么简单! 题目 p ...

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

php 收缩栏,HTML5每日一练之details展开收缩标签的应用相关推荐

最新文章

热门文章