原博来自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>