css3 实现elementui的手风琴效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3实现手风琴</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
:root,
html {
height: 100%;
width: 100%;
}
.wrapper {
width: 600px;
height: 100%;
margin: 30px auto;
border: solid 1px #ebeef5;
border-radius: 4px;
padding: 24px;
}
.wrapper ul li:first-of-type {
border-top: 1px solid #ebeef5;
border-bottom: 1px solid #ebeef5;
}
.wrapper ul li:nth-of-type(n+1) {
border-bottom: 1px solid #ebeef5;
}
.wrapper ul li a {
height: 48px;
line-height: 48px;
background-color: #fff;
color: #303133;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.wrapper ul li #content1,
.wrapper ul li #content2,
.wrapper ul li #content3,
.wrapper ul li #content4 {
display: block;
}
.wrapper ul li div[id]:not(:target) {
display: none !important;
}
.wrapper ul li div[id*="content"] {
padding-bottom: 25px;
font-size: 13px;
color: #303133;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li>
<a href="#content1">一致性 Consistency</a>
<div id="content1">
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；<br>
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
</div>
</li>
<li>
<a href="#content2">反馈 Feedback</a>
<div id="content2">
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；<br>
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
</div>
</li>
<li>
<a href="#content3">效率 Efficiency</a>
<div id="content3">
简化流程：设计简洁直观的操作流程；<br>
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；<br>
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
</div>
</li>
<li>
<a href="#content4">可控 controllablity</a>
<div id="content4">
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；<br>
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
</div>
</li>
</ul>
</div>
</body>
</html>