MUI accordion（折叠面板）

﹏ヽ暗。殇╰゛Y 2023-07-19 12:30 6阅读 0赞

折叠面板从二级列表中演化而来，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>

可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含`.mui-collapse`类的`li`节点上，增加`.mui-active`类即可；mui官网中的方法说明，使用的就是折叠面板控件。