MUI accordion（折叠面板）-蒲公英云

MUI accordion（折叠面板）

折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下：

折叠面板(表单)

    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-collapse">
             <ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
                <form class="mui-input-group">
    <div class="mui-input-row">
        <label>用户名</label>
    <input type="text" class="mui-input-clear" placeholder="请输入用户名">
    </div>
    <div class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码">
    </div>
    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" >确认</button>
        <button type="button" class="mui-btn mui-btn-danger" >取消</button>
    </div>
</form>
        </li>
    </ul>
折叠面板(文字排版)
 <ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板1</a>
            <div class="mui-collapse-content">
            <h1>原生APP体验</h1>
            <h2>原生APP体验</h2>
            <h3>原生APP体验</h3>
            <h4>原生APP体验</h4>
            <h5>原生APP体验</h5>
                <p>面板1子内容</p>
            </div>
        </li>
    </ul>

折叠面板(图片轮播)

 <ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板1</a>
            <div class="mui-collapse-content">
      <div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="img/1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/4.jpg" /></a></div>
  </div>
</div>
            </div>
        </li>
    </ul>