原博来自http://ife.baidu.com/note/detail/id/168,效果十分有趣
然后在他的基础上我做了一些实践效果
实现原理十分简单,主要用的就是<detail>标签
<details>
<summary>概要</summary>
<p>内容内容内容内容内容内容内容</p>
</details>
在Chrome下运行就可以出现一个可展开的折叠标签
接着就是实现一个可选择分支的文字表现,需要有选择枝,并且要有提示选择的文本,最后在选择之后,新出现的选择和文本,要能够覆盖原有的选择和文本框。
然后有了这个
<div style="height: 100px;">
<details style="
height: 100px;
background: #f9f;
">
<summary style="
float: left;
width: 100%;
height: 40px;
background: #9f9;
">概要</summary>
<div style="
float: left;
width: 100%;
height: 100px;
margin-top: -40px;
background: #99f;
">展开后内容</div>
</details>
<div style="margin-top: -60px;">展开前内容区文本</div>
</div>
这里使用margin-top:-40px用来将内容拉上去
并且定位使用float来防止文字重叠
overflow:hidden来防止内容被挤下去
下面是一个文字冒险的实践内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字冒险</title>
<style>
.box {
width: 100%;
height: 200px;
overflow: hidden;
}
.box details {
margin-top: -200px;
height: 200px;
background: #f9f;
}
.box details:first-child {
margin-top: 0;
}
.box summary {
float: left;
width: 50%;
height: 40px;
background: #9f9;
line-height: 40px;
cursor: pointer;
}
.box details > div {
float: left;
width: 100%;
height: 200px;
margin-top: -40px;
background: #99f;
}
.box details + div {
margin-top: -160px;
padding: 0.5em;
}
.box p {
margin: 0 auto 0.5em;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box">
<details>
<summary>再睡一会,睡个回笼觉</summary>
<div>
<details>
<summary>不理她,继续睡觉</summary>
<div>
<p>日复一日,每次六花喊你的时候你都没有搭理她,后来你们慢慢就疏远了</p>
<p>你孤独终老了</p>
</div>
</details>
<details>
<summary>起床,然后和六花一起去上学</summary>
<div>
<p>六花问起了班上转校生新条茜的事,她很善良,打算帮新同学融入班级</p>
</div>
</details>
<div>可是你才躺下你就听到你的青梅竹马六花在楼下喊你上学,你想了想</div>
</div>
</details>
<details>
<summary>起床去学校</summary>
<div>
<details>
<summary>上去搭话</summary>
<div>
<p>好吧我编不下去了,结局你自己想吧</p>
</div>
</details>
<details>
<summary>默默跟在新条茜的后面</summary>
<div>
<p>日复一日,你每天都跟新条茜的后面上学,却从来没有勇气上去和她搭话</p>
<p>你孤独终老了</p>>
</div>
</details>
<div>
<p>路上你看到班上的转校生新条茜</p>
<p>茜的学习很好,长的也很可爱,不过刚来学校还没么朋友,此时正一个人走在你的前面</p>
</div>
</div>
</details>
<div>
<p>清晨,阳光透光窗帘照入卧室,你揉了揉眼睛,伸了个懒腰,你决定:</p>
</div>
</div>
</body>
</html>