折叠面板

默认效果

标题标题标题标题标题1
内容1
标题标题标题标题标题2
内容2
标题标题标题标题标题3
内容3
<div class="ui-collapse">
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">标题标题标题标题标题1</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容1</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">标题标题标题标题标题2</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容2</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">标题标题标题标题标题3</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容3</div>
</div>
</div>
</div>

设置显示项

标题标题标题标题标题1
内容1
标题标题标题标题标题2
内容2
标题标题标题标题标题3
内容3
<div class="ui-collapse">
<div class="ui-card">
<div class="ui-card-header active"><div class="ui-card-header-title">标题标题标题标题标题1</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body">
<div class="ui-card-text">内容1</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">标题标题标题标题标题2</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容2</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">标题标题标题标题标题3</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容3</div>
</div>
</div>
</div>

鼠标经过

标题标题标题标题标题1
内容1
标题标题标题标题标题2
内容2
标题标题标题标题标题3
内容3
<div class="ui-collapse" data-type="hover">
<div class="ui-card">
<div class="ui-card-header active"><div class="ui-card-header-title">标题标题标题标题标题1</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body">
<div class="ui-card-text">内容1</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">标题标题标题标题标题2</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容2</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">标题标题标题标题标题3</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容3</div>
</div>
</div>
</div>

嵌套

嵌套1
子嵌套1
子嵌套1
内容1
子嵌套2
内容2
子嵌套3
内容3
子嵌套2
内容2
子嵌套3
内容3
嵌套2
内容2
嵌套3
内容3
<div class="ui-collapse">
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">嵌套1</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">
<!---->
<div class="ui-collapse">
<div class="ui-card active">
<div class="ui-card-header"><div class="ui-card-header-title">子嵌套1</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body">
<div class="ui-card-text">
<!---->
<div class="ui-collapse">
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">子嵌套1</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容1</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">子嵌套2</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容2</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">子嵌套3</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容3</div>
</div>
</div>
</div>
<!---->
</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">子嵌套2</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容2</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">子嵌套3</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容3</div>
</div>
</div>
</div>
<!---->
</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">嵌套2</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容2</div>
</div>
</div>
<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">嵌套3</div><div class="ui-card-header-more"><span class="ui-icon-right"></span></div></div>
<div class="ui-card-body hide">
<div class="ui-card-text">内容3</div>
</div>
</div>
</div>

折叠菜单(不支持多层嵌套)

<div class="ui-collapse-menu-title"><a href="/" title="网站首页">网站首页</a></div>
<div class="ui-collapse-menu-title"><a href="/about/" title="关于我们">关于我们</a><i class="ui-icon-right"></i></div>
<div class="ui-collapse-menu-body">
<ul>
<li><a href="/list/7.html" title="公司简介"><i class="ui-icon-square ui-mr"></i>公司简介</a></li>
<li><a href="/about-test/" title="企业文化"><i class="ui-icon-square ui-mr"></i>企业文化</a></li>
<li><a href="/list/9.html" title="荣誉资质"><i class="ui-icon-square ui-mr"></i>荣誉资质</a></li>
</ul>
</div>
<div class="ui-collapse-menu-title"><a href="/news/" title="新闻中心">新闻中心</a><i class="ui-icon-right"></i></div>
<div class="ui-collapse-menu-body">
<ul>
<li><a href="/list/10.html" title="公司动态"><i class="ui-icon-square ui-mr"></i>公司动态</a></li>
<li><a href="/list/11.html" title="行业资讯"><i class="ui-icon-square ui-mr"></i>行业资讯</a></li>
</ul>
</div>
<div class="ui-collapse-menu-title"><a href="/product/" title="产品展示">产品展示</a><i class="ui-icon-right"></i> </div>
<div class="ui-collapse-menu-body">
<ul>
<li><a href="/list/12.html" title="生活家电"><i class="ui-icon-square ui-mr"></i>生活家电</a></li>
<li><a href="/list/13.html" title="智能家电"><i class="ui-icon-square ui-mr"></i>智能家电</a></li>
<li><a href="/list/14.html" title="配件产品"><i class="ui-icon-square ui-mr"></i>配件产品</a></li>
</ul>
</div>