# 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 屬性取消圓角](/try/try.php?filename=tryjqmob_collapsible_inset) 如何取消可折疊塊上的圓角。 [通過 data-mini 屬性迷你化可折疊塊](/try/try.php?filename=tryjqmob_collapsible_mini) 如何讓可折疊塊更小。 [通過 data-collapsed-icon 和 data-expanded-icon 改變圖標](/try/try.php?filename=tryjqmob_collapsible_icons) 如何改變可折疊塊的圖標（默認是 + 和 -）。