可折叠的内容 Collapsible content markup

要创建一个可折叠的区块，先创建一个容器，然后给容器添加data-role="collapsible"属性

容器内直接的标题（h1-h6)子结点，Jquery Mobile会将之表现为可点击的按钮，并在左侧添加一个“+"按钮，表示是可以展开的

在头部后面你可以添加任何想要折叠的html标记。框架会自动把这些标记包裹在一个容器里用以折叠或显

<div data-role="collapsible">
　 <h3>I'm a header</h3>
　 <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>

如上所示：默认情况下，可折叠容器是展开的，可以通过通过点击头部收缩。给折叠的容器添加data-collapsed="true"的属性，可以设为默认收缩

<div data-role="collapsible" **data-collapsed="true">**

可折叠的内容采用了精简的样式，我们仅仅在内容和标题间添加了一些margin，标题则采用它所在容器的默认主题

嵌套的折叠 Nested Collapsibles

折叠组 Collapsible sets

通过给父容器添加data-role="collapsible-set"属?然后每一个子容器data-role="collapsible"属性，可以让容器展开时，其他容器被折叠的效果，类似手风琴组件