jQuery Mobile教程-基础篇-可折叠篇

特别申明：本系列教程由小春撰写

本文主要看一下jQuery Mobile体系中的可折叠内容，我们采用"提问●回答"的方式来初步地了解一下：

1、如何设置折叠？

示例：

<div data-role="collapsible">
<h3>本文主要介绍可折叠</h3>
<ol data-role="listview" data-inset="true">
	<li><a>如何设置折叠</a></li>
	<li><a>如何设置theme</a></li>
	<li><a href="#open-mode-page">如何设置展开模式</a></li>
</ol>
</div>

图示：

说明：
1、给容器增加data-role="collapsible"
2、默认上述增强后为闭合状态

2、如何设置展开模式？

以链接按钮为例：

<div data-role="collapsible" data-collapsed="false">
<h3>本文主要介绍可折叠</h3>
<ol data-role="listview" data-inset="true">
	<li><a>如何设置折叠</a></li>
	<li><a>如何设置theme</a></li>
	<li><a href="#open-mode-page">如何设置展开模式</a></li>
</ol>
</div>

图示：

说明：
1、添加data-collapsed="false"的属性即可

demo

PS:
1、有问题欢迎在官网留言或者直接联系我：@zhangyaochun_fe
2、可以在官网的问答频道进行提问，我们会尽快回复
3、谢谢您对w3cplus的jquery mobile系列教程的关注

关于小春

专注于前端开发，对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习，涉足移动前端许久，爱好分享交流…个人博客focus-fe。欢迎随时关注我：新浪微博