jQuery Mobile 可折叠塊
jQuery Mobile 可折叠塊
可折叠內容塊
可折叠塊允許您隱藏或顯示內容 - 對於存儲部分信息很有用。
如需創建一個可折叠的內容塊，需要為容器添加 data-role="collapsible" 屬性。在容器（div）內，添加一個標題元素（H1-H6），後跟您想要進行擴展的 HTML 標記：
默認情況下，內容是被折叠起來的。如需在頁面加載時展開內容，請使用 data-collapsed="false"：
實例
<div data-role="collapsible" data-collapsed="false">
<h1>點擊我 - 我可以折叠!</h1>
<p>I'm 現在我默認是展開的。</p>
</div>
<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>
<h1>點擊我 - 我可以折叠!</h1>
<p>我是被展開的內容。</p>
<div data-role="collapsible">
<h1>點擊我 - 我是嵌套的可折叠塊！</h1>
<p>我是嵌套的可折叠塊中被展開的內容。</p>
</div>
</div>
嘗試一下 »
| 可折叠的內容塊可以根據您的需要進行多次嵌套。 |
可折叠集合
可折叠集合是將可折叠塊組合在一起（就像手風琴一樣）。當一個新的塊被展開時，所有其他的塊都會被折叠起來。
創建若干個可折叠的內容塊，然後把可折叠內容塊用帶有 data-role="collapsible-set" 的新容器包圍起來：
實例
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>點擊我 - 我可以折叠！</h1>
<p>我是被展開的內容。</p>
</div>
<div data-role="collapsible">
<h1>點擊我 - 我可以折叠!</h1>
<p>我是被展開的內容。</p>
</div>
</div>
<div data-role="collapsible">
<h1>點擊我 - 我可以折叠！</h1>
<p>我是被展開的內容。</p>
</div>
<div data-role="collapsible">
<h1>點擊我 - 我可以折叠!</h1>
<p>我是被展開的內容。</p>
</div>
</div>
嘗試一下 »
更多實例
通過 data-inset 屬性取消圓角與外邊距
如何取消可折叠塊上的圓角與外邊距。
通過 data-mini 屬性迷你化可折叠塊
如何讓可折叠塊更小。
通過 data-collapsed-icon 和 data-expanded-icon 改變圖標
如何改變可折叠塊的圖標（默認是 + 和 -）。
彈窗中使用折叠
在彈窗中創建折叠項。
修改圖標位置
在折叠項中如何修改圖標的位置 (默認為在左邊)。