查看“折叠面板”的源代码

<div class="panel-group">
  <div class="panel panel-info">
    <div class="panel-heading">测试标题1111</div>
    <div class="mw-collapsible mw-made-collapsible">
      <div class="panel-body">
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
  <div class="panel panel-info">
    <div class="panel-heading">测试标题2222</div>
    <div class="mw-collapsible mw-made-collapsible mw-collapsed">
      <div class="panel-body">
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
  <div class="panel panel-info">
    <div class="panel-heading">测试标题3333</div>
    <div class="mw-collapsible mw-made-collapsible mw-collapsed">
      <div class="panel-body">
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
        <p>在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面，为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑，让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
</div>
{{#css:
.panel-group {      
      margin-bottom: 20px
    }

    .panel-group .panel {
      margin-bottom: 2px;
      font-size: 14px;
    }

    .panel-info {
      position: relative;
    }

    .panel-heading {
      padding: 10px 20px;  
      font-weight: bold;
      color: #915d2e;
      background: #dfcdad;
    }
    .panel-body{      
      color: #666;
      background: #fbf9f1;
      padding: 10px 20px;       
    }
    .panel-body p{
      line-height: 1.6;
    }
    .mw-collapsible-toggle{
      position: absolute;
      right: 15px;
      top: 2px;
    }
   .mw-collapsible-toggle .mw-collapsible-text,.mw-collapsible-toggle-collapsed .mw-collapsible-text{
      position: relative;
      font-size: 0;
      &::before{
        content: '-';
        color: #987b5d;
        font-size: 28px;
        text-align: center;
        width: 18px;
        display: inline-block;
      }      
    }
    .mw-collapsible-toggle-collapsed .mw-collapsible-text{
      &::before{
        content: '+';
      }      
    }
.panel-info .mw-collapsible-text:hover{ text-decoration: none;}
    .mw-collapsible-toggle-default:before,.mw-collapsible-toggle-default:after{display: none;}
}}