得分
总共8分得了6分有一个背景样式没处理好
重点
- 无js
- 使用details和summary组合
- 动画处理,使用max-height:0来过渡
HTML
<div class="container">
<details class="details-box layout">
<!-- 解决outline交互体验 -->
<summary><a>布局</a></summary>
<!-- <ul>
<li>Flex布局</li>
<li>Grid布局</li>
<li>Shapes布局</li>
<li>Columns布局</li>
</ul> -->
</details>
<ul>
<li>Flex布局</li>
<li>Grid布局</li>
<li>Shapes布局</li>
<li>Columns布局</li>
</ul>
<details class="details-box component">
<!-- 解决outline交互体验 -->
<summary><a>组件</a></summary>
<!-- <ul>
<li>按钮</li>
<li>输入框</li>
<li>下拉列表</li>
<li>单复选框</li>
</ul> -->
</details>
<ul>
<li>按钮</li>
<li>输入框</li>
<li>下拉列表</li>
<li>单复选框</li>
</ul>
</div>
css
.container {
width: 180px;
min-height: 600px;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.details-box {
padding: 10px;
/* max-height: 20px;
overflow: hidden;
transition: all 1s; */
}
.details-box summary {
position: relative;
font-weight: bold;
cursor: pointer;
/* 阻止选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
}
.details-box:hover {
background-color: #ECF8FF
}
.details-box summary a {
color: inherit;
text-decoration: none;
}
.details-box summary::after {
content: '';
position: absolute;
width: 1em;
height: 1em;
top: .2em;
right: 5px;
background: url('https://www.zhangxinxu.com/study/201801/arrow-on.svg') no-repeat;
background-size: 100% 100%;
transform: rotate(180deg);
transition: transform .5s;
}
.details-box:not([open]) summary::after {
margin-top: .25em;
transform: rotate(0deg);
}
/* 隐藏默认三角 */
.details-box ::-webkit-details-marker {
display: none;
}
.details-box ::-moz-list-bullet {
font-size: 0;
}
.details-box+ul li {
line-height: 2;
color: #999999;
cursor: pointer;
}
.details-box+ul li:hover {
background-color: #ECF8FF
}
details+ul {
margin: 0;
padding: 0;
max-height: 0;
transition: max-height 1s;
overflow: hidden;
list-style-type: none;
}
details+ul li {
padding: 0 0 0 1.5em;
}
details[open]+ul {
max-height: 200px;
}
总结
1.这里为什么要把<ul>从details中剥离出来?
原因:将details中的隐藏元素去除,并将其写出来的原因是,如果写进去那么隐藏部分的height初始是auto,没办法从0开始所以不可以形成过渡动画,所有我们就通过details标签点击后会知道添加open属性的特性去给剥离出来的ul的高度的值是设置开始和结束值
其他:除了details这样的写法还有就算只要是有点击标签元素,标签元素会添加 特定属性的就可以了例如input[type='checkbox'],当我们点击input的时候会自动添加checkbox的属性,但是从语言上来说还是details会好一点
2.防止点击一段文字,文字有被选中的蓝光再上面
/* 阻止选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)