4***@qq.com
4***@qq.com
  • 发布:2016-08-16 13:56
  • 更新:2016-08-16 15:21
  • 阅读:1819

折叠面版怎么样可以默认展开呢,我回了mui-acitive,可是只要点击两次就失效了。

分类:MUI

折叠面版怎么样可以默认展开呢,我回了mui-acitive,可是只要点击两次就失效了。

2016-08-16 13:56 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

请贴一下完整代码。

4***@qq.com

4***@qq.com (作者)

<ul class="mui-table-view" id="sheet1">  
                <li class="mui-table-view-cell mui-collapse mui-active">  
                    <a class="mui-navigate-right" href="#" name="jinshu">重金属</a>  
                    <div class="mui-collapse-content">  
                        <table class="table-pc table-fx">  
                            <thead>  
                                <th width="20%"> 检测项目 </th>  
                                <th width="20%">结果公示</th>  
                                <th width="20%">放心365<br> 甄选标准  
                                </th>  
                                <th width="20%">欧盟标准 </th>  
                                <th width="20%">中国标准</th>  
                            </thead>  
                            <tr>  
                                <td>铅(Pb)铅(Pb)铅(Pb)</td>  
                                <td> ≤0.2</td>  
                                <td> ≤0.2</td>  
                                <td> ≤0.2</td>  
                                <td> ≤0.2</td>  
                            </tr>  

                        </table>  
                        <p class="mui-text-right f12px ">注:单位为mg/kg</p>  
                    </div>  
                </li>  
                <li class="mui-table-view-cell mui-collapse mui-active">  
                    <a class="mui-navigate-right" href="#" name="lihua">理化</a>  
                    <div class="mui-collapse-content">  
                        <table class="table-pc table-fx">  
                            <thead>  
                                <th> 检测项目 </th>  
                                <th>结果公示</th>  
                                <th>放心365<br> 甄选标准  
                                </th>  
                                <th>欧盟标准 </th>  
                                <th>中国标准</th>  
                            </thead>  
                            <tr>  
                                <td>铅(Pb)</td>  
                                <td> ≤0.2</td>  
                                <td> ≤0.2</td>  
                                <td> ≤0.2</td>  
                                <td> ≤0.2</td>  
                            </tr>  

                        </table>  
                        <p class="mui-text-right f12px ">注:单位为mg/kg</p>  
                    </div>  
                </li>  
                <li class="mui-table-view-cell mui-collapse mui-active">  
                    <a class="mui-navigate-right fx-table-view" href="#">农药残留</a>  
                    <div class="mui-collapse-content">  
                        <table class="table-pc table-fx">  
                            <thead>  
                                <th>&nbsp;检测项目 </th>  
                                <th>结果公示</th>  
                                <th>放心365<br> 甄选标准  
                                </th>  
                                <th>欧盟标准 </th>  
                                <th>中国标准</th>  
                            </thead>  
                            <tr>  
                                <td>铅(Pb)</td>  
                                <td> ≤0.2</td>  
                                <td> ≤0.2</td>  
                                <td> ≤0.2</td>  
                                <td> ≤0.2</td>  
                            </tr>  

                        </table>  
                        <p class="mui-text-right f12px ">注:单位为mg/kg</p>  
                    </div>  
                </li>  
            </ul>  
赵梦欢

赵梦欢 - 专注前端,乐于分享!

给父节点添加.mui-unfold类,默认打开面板,需要添加.mui-active类,可以通过classList的toggle方法切换。

<ul class="mui-table-view mui-unfold">  
    <li class="mui-table-view-cell mui-collapse mui-active">  
        <a class="mui-navigate-right mui-subtitle" href="#">面板1</a>  
        <div class="mui-collapse-content">  
            <p>面板1子内容</p>  
        </div>  
    </li>  
    <li class="mui-table-view-cell mui-collapse mui-active">  
        <a class="mui-navigate-right mui-subtitle" href="#">面板2</a>  
            <div class="mui-collapse-content">  
            <p>面板2子内容</p>  
        </div>  
    </li>  
    <li class="mui-table-view-cell mui-collapse mui-active">  
        <a class="mui-navigate-right mui-subtitle" href="#">面板3</a>  
        <div class="mui-collapse-content">  
            <p>面板3子内容</p>  
        </div>  
    </li>  
</ul>
mui('body').on('tap','.mui-collapse',function(e){    
    if(e.target.tagName == "A" && && e.target.classList.contains('mui-subtitle')){  
        this.classList.toggle('mui-active');  
    }  
})

注:这里之所以加一个.mui-subtitle类且进行判断只是为了防止点击其他地方也触发这个切换,自己可以自行设置标识判断。

  • 4***@qq.com (作者)

    多谢多谢,试了一下,OK了

    2016-08-16 15:29

该问题目前已经被锁定, 无法添加新回复