<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<style>
.box {
max-width: 500px;
margin: 5% auto;
border: 2px solid #aaaaaa;
}
.item .header {
padding: 10px 0;
background-color: #dddddd;
cursor: pointer;
user-select: none;
text-align: center;
}
.item.active .header {
background-color: #cccccc;
}
.item.active .body {
padding: 10px;
height: 100px;
text-align: justify;
}
.item .body {
transition: all .3s;
overflow: auto;
}
.item:not(:last-child) {
border-bottom: 2px solid #aaaaaa;
}
.item:not(.active) .body {
height: 0;
}
</style>
</head>
<body>
<!-- cmd /c start chrome --app=$(FULL_CURRENT_PATH) -->
<div class="box">
<div class="item active">
<div class="header">选项一</div>
<div class="body">
从前有一个公主,她是胖国王和瘦皇后的女儿。
最近她好像怪怪的,先是把橘子当成网球打,喷的大家一脸橘子汁。
又把小羊当成小狗,拿着骨头喂羊吃。
还把外婆当成了皇后,公主说:“她们的头发看起来一模一样嘛!”
</div>
</div>
<div class="item">
<div class="header">选项二</div>
<div class="body">
接着,公主把7看成了9,搭错了公交车。
上课时,又把3看成8,惹得全班哈哈大笑。
公主心里很难过,不知道要怎么办。
皇后找了医生来,医生说:“公主可能有点近视,也有点闪光哦!我来帮她仔细检查看看。”
</div>
</div>
<div class="item">
<div class="header">选项三</div>
<div class="body">
国王说:“难怪公主最近常说眼睛累,看东西都凑得很近。”
皇后说:“难怪公主常揉眼睛,也常眯着眼看东西。”
医生说:“公主一定常常在灯光不足的地方看书;
躺着看书看太久;
</div>
</div>
<div class="item">
<div class="header">选项四</div>
<div class="body">
还有,电视看太久也不休息。”
检查后,医生说:“还好,公主只是假性近视,多让眼睛休息就好了。不过,公主还有散光,得先戴眼镜纠正一下。”
公主试了半天,终于找到了一副自己喜欢的眼镜。
公主带上了粉红色的小眼镜,哇!东西看的好清楚哟。
</div>
</div>
</div>
<script>
const itemEles = document.querySelectorAll('.item')
const headerEles = document.querySelectorAll('.header')
headerEles.forEach((headerEle, index) => {
headerEle.addEventListener('click', () => {
document.querySelector('.item.active').classList.remove('active')
itemEles[index].classList.add('active')
})
})
</script>
</body>
</html>
good
Nice
New Bee