折叠面板:修订间差异

更新日期: 2024-06-03  最新编辑:郑妹仙

无编辑摘要
标签已被回退
无编辑摘要
 
(未显示2个用户的40个中间版本)
第1行: 第1行:
<div class="wikitable mw-collapsible mw-made-collapsible">
==== 折叠面板 ====


{{折叠面板|开始|主框=1}}
<syntaxhighlight lang="html">
{{折叠面板|标题=测试标题1|选项=1|主框=1|样式=info|展开=是}}
<div class="panel-group">
测试内容
  <div class="panel-info">
{{折叠面板|内容结束}}
    <div class="panel-heading">测试标题1111</div>
{{折叠面板|标题=测试标题2|选项=2|主框=1|样式=info}}
    <div class="mw-collapsible mw-made-collapsible">
测试内容
      <div class="panel-body">
{{折叠面板|内容结束}}
        <p>在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。</p>
{{折叠面板|结束}}
        <p>在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。</p>
      </div>
    </div>
  </div>
  <div class="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-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>
</div>
{{#css:
{{#css:
.panel-group {
.panel-group { margin-bottom: 20px } 
    margin-bottom: 20px
.panel-info { position: relative;  margin-bottom: 2px; font-size: 14px; }
.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;}
.panel-info .mw-collapsible-text:hover{ text-decoration: none;}
.mw-collapsible-toggle-default:before,.mw-collapsible-toggle-default:after{ display: none;}
.mw-collapsible-toggle{ position: absolute; width: 100%; left: 0;top: 0; }   
.mw-collapsible-toggle .mw-collapsible-text,.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  position: relative;
  font-size: 0;
  display: block;
  width: 100%;
  &::after{
    content: '-';
    color: #987b5d;
    font-size: 28px;
    display: block;
    text-align: right;
    padding-right: 20px;
    line-height: 1.3;
  }     
}
}
 
.mw-collapsible-toggle-collapsed .mw-collapsible-text{
.panel-group .panel {
  &::after{
     margin-bottom: 0;
     content: '+';
     border-radius: 4px
     padding-right: 16px;
  }     
}
}
}}
</syntaxhighlight>


.panel-group .panel+.panel {
    margin-top: 5px
}


.panel-group .panel-heading {
<div class="panel-group">
     border-bottom: 0
  <div class="panel-info">
}
    <div class="panel-heading">测试标题1111</div>
 
     <div class="mw-collapsible mw-made-collapsible">
.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body {
      <div class="panel-body">
     border-top: 1px solid #ddd
        <p>在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。</p>
}
        <p>在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。</p>
 
      </div>
.panel-group .panel-footer {
    </div>
    border-top: 0
  </div>
}
  <div class="panel-info">
 
    <div class="panel-heading">测试标题2222</div>
.panel-group .panel-footer+.panel-collapse .panel-body {
    <div class="mw-collapsible mw-made-collapsible mw-collapsed">
    border-bottom: 1px solid #ddd
      <div class="panel-body">
}
        <p>在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。</p>
.panel-info {
        <p>在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。</p>
    border-color: #bce8f1
      </div>
}
    </div>
 
  </div>
.panel-info>.panel-heading {
  <div class="panel-info">
     color: #31708f;
    <div class="panel-heading">测试标题3333</div>
     background-color: #d9edf7;
    <div class="mw-collapsible mw-made-collapsible mw-collapsed">
     border-color: #bce8f1
      <div class="panel-body">
}
        <p>在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。</p>
 
        <p>在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。</p>
.panel-info>.panel-heading+.panel-collapse>.panel-body {
      </div>
     border-top-color: #bce8f1
     </div>
  </div>
</div>
{{#css:
.panel-group { margin-bottom: 20px } 
.panel-info { position: relative;  margin-bottom: 2px; font-size: 14px; }
.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;}
.panel-info .mw-collapsible-text:hover{ text-decoration: none;}
.mw-collapsible-toggle-default:before,.mw-collapsible-toggle-default:after{ display: none;}
.mw-collapsible-toggle{ position: absolute; width: 100%; left: 0;top: 0; }  
.mw-collapsible-toggle .mw-collapsible-text,.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  position: relative;
  font-size: 0;
  display: block;
  width: 100%;
  &::after{
     content: '-';
     color: #987b5d;
     font-size: 28px;
    display: block;
    text-align: right;
    padding-right: 20px;
     line-height: 1.3;
  }     
}
}
 
.mw-collapsible-toggle-collapsed .mw-collapsible-text{
.panel-info>.panel-heading .badge {
  &::after{
     color: #d9edf7;
     content: '+';
     background-color: #31708f
     padding-right: 16px;
  }     
}
}
.panel-info>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: #bce8f1
}
}}
}}

2024年5月29日 (三) 15:19的最新版本

折叠面板

<div class="panel-group">
  <div class="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-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-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-info { position: relative;  margin-bottom: 2px; font-size: 14px; }
.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;}
.panel-info .mw-collapsible-text:hover{ text-decoration: none;}
.mw-collapsible-toggle-default:before,.mw-collapsible-toggle-default:after{ display: none;}
.mw-collapsible-toggle{ position: absolute; width: 100%; left: 0;top: 0; }    
.mw-collapsible-toggle .mw-collapsible-text,.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  position: relative;
  font-size: 0;
  display: block;
  width: 100%;
  &::after{
    content: '-';
    color: #987b5d;
    font-size: 28px;
    display: block;
    text-align: right;
    padding-right: 20px;
    line-height: 1.3;
  }      
}
.mw-collapsible-toggle-collapsed .mw-collapsible-text{
  &::after{
    content: '+';
    padding-right: 16px;
  }      
}
}}


测试标题1111

在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。

在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。

测试标题2222

在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。

在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。

测试标题3333

在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。

在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。完全没有因为是手游而偷工减料感觉在剧情方面,为了让老玩家有更多的回忆。《魔力宝贝》手游版的剧情衔接更加的紧凑,让玩家有更多的代入感。