黑马程序员技术交流社区
标题: 【广州前端】- 利用HTML5 details,summary实现一些无JS交互效果 [打印本页]
作者: AMay 时间: 2018-6-20 16:34
标题: 【广州前端】- 利用HTML5 details,summary实现一些无JS交互效果
【简介】
details是个神奇的元素，在无需任何css、js的情况下，创建展开/收缩的开关效果。利用summary标签还可以创建内容的概述信息。
details有一个属性，open，表示默认是打开的。反之默认是关闭的样式。
【代码示例一】
summary是个可点击的部分，用来控制收缩或展开。
[HTML] 纯文本查看 复制代码
<details open>
<summary>查看详细信息</summary>
<figure>
<img src="2.jpg" alt="xx" width="200">
<figcaption>生活照片</figcaption>
</figure>
</details>
效果
注意：
1. 如果我们使用JS脚本手动移除这个open属性，即使没有点击行为的发生，我们内容也会收起。
2. <summary>标签如果缺省，则<details>元素会在内部自动创建一个<summary>内容，默认的文案是“详细信息”。
【details浏览器内置UI可以自定义】
<details>标签默认的小三角样式有些简陋，在实际应用的时候，往往不是我们希望的样子，不要担心，我们是可以对其进行自定义的。在Chrome等浏览器下使用::-webkit-details-marker，在Firefox浏览器下使用::-moz-list-bullet可以对小三角进行UI控制，例如改变颜色，改变大小，使用自定义的图形代替，或者直接隐藏等，我们来看几个简单的案例。
【代码示例二】
小三角右侧显示同时颜色变淡
Html代码
[HTML] 纯文本查看 复制代码
<details class="details-1" open>
<summary>这是示例1</summary>
<content>本案例展示对小三角UI重定义：包括显示在右侧，颜色减淡等。</content>
</details>
Css代码如下
[CSS] 纯文本查看 复制代码
.details-1 summary {
width: -moz-fit-content;
width: fit-content;
direction: rtl; /*把文本方向设置为“从右向左”*/
}
.details-1 ::-webkit-details-marker {
direction: ltr;
color: gray;
margin-left: .5ch;
}
.details-1 ::-moz-list-bullet {
direction: ltr;
color: gray;
margin-left: .5ch;
}效果：
【代码示例三】
而实际上实际开发的时候，对小三角UI更便捷的定制方法是：隐藏浏览器原生的小三角，然后借助::before或::after伪元素重新生成我们想要的UI效果，下面这个案例就将展示相关的处理。
隐藏浏览器原生的小三角并使用自定义三角替换。
Html结构代码与案例二一样
Css代码如下
[CSS] 纯文本查看 复制代码
/* 隐藏默认三角 */
.details-2 ::-webkit-details-marker {
display: none;
}
.details-2 ::-moz-list-bullet {
font-size: 0;
}
/* 自定义的三角 */
.details-3 summary::after {
content: '♡';
position: absolute;
width: 1em;
height: 1em;
margin: .2em 0 0 .5ch;
transition: transform .2s;
}
.details-2:not([open]) summary::after {
margin-top: .25em;
transform: rotate(90deg);
}
效果：
【代码四-多级嵌套的树形菜单交互效果】
Html结构代码
[HTML] 纯文本查看 复制代码
<details>
<summary>传智播客</summary>
<details>
<summary>前端移动与开发</summary>
<div>html5css3</div>
<div>webApi</div>
...
<div>JavaScript</div>
</details>
<details>
<summary>JavaEE</summary>
<div>JavaEE</div>
</details>
<div>ui设计</div>
<div>php</div>
</details>
Css代码
[CSS] 纯文本查看 复制代码
/* 隐藏默认三角 */
::-webkit-details-marker {
display: none;
}
::-moz-list-bullet {
font-size: 0;
float: left;
}
details {
padding-left: 20px;
}
summary::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #999;
background: linear-gradient(to right, #999, #999) no-repeat center, linear-gradient(to top, #999, #999) no-repeat center;
background-size: 2px 10px, 10px 2px;
vertical-align: -2px;
margin-right: 6px;
margin-left: -20px;
}
[open]>summary::before {
background: linear-gradient(to right, #999, #999) no-repeat center;
background-size: 10px 2px;
}
效果：
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
