JQuery Mobile可折疊組件是一種非常有用的UI組件，它允許您使用很少的代碼來(lái)創(chuàng)建一個(gè)具有折疊效果的容器。該組件可以被用來(lái)顯示一個(gè)可折疊的菜單或者內(nèi)容面板。

<!-- 折疊菜單 -->
<div data-role="collapsible">
<h3>折疊菜單</h3>
<p>這里放置您要顯示的內(nèi)容。</p>
</div>
<!-- 折疊內(nèi)容面板 -->
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>面板1</h3>
<p>這里放置您要顯示的內(nèi)容。</p>
</div>
<div data-role="collapsible">
<h3>面板2</h3>
<p>這里放置您要顯示的內(nèi)容。</p>
</div>
<div data-role="collapsible">
<h3>面板3</h3>
<p>這里放置您要顯示的內(nèi)容。</p>
</div>
</div>

在這個(gè)例子中，我們使用了兩種不同的可折疊組件。第一個(gè)是一個(gè)簡(jiǎn)單的折疊菜單，其中只包含一條標(biāo)題和一個(gè)內(nèi)容段落。這個(gè)組件可以通過(guò)單擊標(biāo)題來(lái)展開或收起內(nèi)容。第二個(gè)可折疊組件是一個(gè)折疊內(nèi)容面板。這個(gè)組件包含一個(gè)標(biāo)題和一個(gè)或多個(gè)內(nèi)容段落。與折疊菜單不同的是，折疊內(nèi)容面板可以同時(shí)打開多個(gè)內(nèi)容面板。

要注意的是，如果您想使用可折疊組件，您需要將它們包含在一個(gè)`data-role="collapsible-set"`的容器中，這可以確保在任何時(shí)候只有一個(gè)內(nèi)容面板是打開的。如果您不需要此功能（即同時(shí)打開多個(gè)選項(xiàng)卡），則可以將每個(gè)可折疊組件分別包含在`data-role="collapsible"`的容器中。