UDN-企业互联网技术人气社区

板块导航

浏览  : 672
回复  : 1

[HTML5] HTML5的details展开收缩标签的应用

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-11 00:17:54 | 显示全部楼层 |阅读模式
本帖最后由 友美C_cup 于 2015-7-11 00:19 编辑

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现。
注:目前仅Chrome支持此标签。

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

    detalis标签:

    案例1:


  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>HTML5每日一练之details展开收缩标签的应用</title>
  6.     </head>
  7.    
  8.     <body>
  9.         <details>
  10.                 <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary>
  11.                 <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5/CSS3论坛</p>
  12.         </detalis>
  13.     </body>
  14. </html>
复制代码


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

    案例2:


  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>HTML5每日一练之details展开收缩标签的应用</title>
  6.     </head>
  7.    
  8.     <body>
  9.         <details>
  10.                 <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5/CSS3论坛</p>
  11.         </details>
  12.     </body>
  13. </html>
复制代码

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


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

    Open属性:

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

    案例3:


  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>HTML5每日一练之details展开收缩标签的应用</title>
  6.     </head>
  7.    
  8.     <body>
  9.         <details open>
  10.                 <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary>
  11.                 <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5/CSS3论坛</p>
  12.         </details>
  13.     </body>
  14. </html>
复制代码






相关帖子

发表于 2015-9-17 15:20:11 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部