jQuery Mobile 可摺疊塊

可摺疊內容塊

可摺疊塊允許您隱藏或顯示內容 - 對於儲存部分資訊很有用。

如需建立一個可摺疊的內容塊,需要為容器新增 data-role="collapsible" 屬性。在容器(div)內,新增一個標題元素(H1-H6),後跟您想要進行擴充套件的 HTML 標記:

例項

<div data-role="collapsible">
<h1>點選我 - 我可以摺疊!</h1>
<p>我是可摺疊的內容。</p>
</div>

嘗試一下 ?

預設情況下,內容是被摺疊起來的。如需在頁面載入時展開內容,請使用 data-collapsed="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>

嘗試一下 ?

可摺疊的內容塊可以根據您的需要進行多次巢狀。


可摺疊集合

可摺疊集合是將可摺疊塊組合在一起(就像手風琴一樣)。當一個新的塊被展開時,所有其他的塊都會被摺疊起來。

建立若干個可摺疊的內容塊,然後把可摺疊內容塊用帶有 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>

嘗試一下 ?


例項

更多例項

通過 data-inset 屬性取消圓角與外邊距
如何取消可摺疊塊上的圓角與外邊距。

通過 data-mini 屬性迷你化可摺疊塊
如何讓可摺疊塊更小。

通過 data-collapsed-icon 和 data-expanded-icon 改變圖示
如何改變可摺疊塊的圖示(預設是 + 和 -)。

彈窗中使用摺疊
在彈窗中建立摺疊項。

修改圖示位置
在摺疊項中如何修改圖示的位置 (預設為在左邊)。