jQueryのモバイル折りたたみ可能なブロック

前：jQueryのモバイルナビゲーションバー

次へ：jQueryのモバイルグリッド

折りたたみコンテンツブロック

有用な情報の一部を格納するために - 折りたたみブロックを使用すると、非表示にしたり、コンテンツを表示することができます。

折りたたみ可能なコンテンツブロックを作成するには、コンテナデータ-役割= "折りたたみ式"属性を追加する必要があります。容器内部（DIV）で、HTMLタグを作りたい拡張に続いて、ヘッダ要素（H1-H6）を、追加します。

例

<div data-role="collapsible" >
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>

»をお試しください

デフォルトでは、コンテンツが折り畳まれています。ページのロード時にコンテンツを展開し、データ崩壊= "false"に使用するには：

例

<div data-role="collapsible" data-collapsed="false" >
<h1>点击我 - 我可以折叠!</h1>
<p>I'm 现在我默认是展开的。</p>
</div>

»をお試しください

ネストされた折りたたみ可能なブロック

折りたたみコンテンツブロックは、互いにネストすることができます。

例

<div data-role="collapsible" >
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible" >
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>

»をお試しください

	折りたたみコンテンツブロックは、必要に応じて複数回ネストすることができます。

折り畳み式のコレクション

折り畳み式の折りたたみ可能なブロックセットは、（アコーディオンのように）一緒にグループ化されています。新しいブロックが展開されると、他のすべてのブロックが折り畳まれます。

いくつかの折りたたみ可能なコンテンツのブロックを作成し、新しいデータ・ロールで折りたたみ可能なコンテナに囲まれたブロック=の "折り畳み式セット」の内容：

例

<div data-role="collapsible-set" >
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
</div>

»をお試しください