免費AI編程助手
jQuery Mobile 可折疊塊
2018-02-02 18:25 更新
jQuery Mobile 可折疊塊
通過使用jQuery Mobile可折疊塊，你可以控制是否將內(nèi)容顯示或者隱藏。
可折疊內(nèi)容塊
可折疊塊允許您隱藏或顯示內(nèi)容 - 對于存儲部分信息很有用。
如需創(chuàng)建一個可折疊的內(nèi)容塊，需要為容器添加 data-role="collapsible" 屬性。在容器（div）內(nèi)，添加一個標題元素（H1-H6），后跟您想要進行擴展的 HTML 標記：
默認情況下，內(nèi)容是被折疊起來的。如需在頁面加載時展開內(nèi)容，請使用 data-collapsed="false"：
實例
<div data-role="collapsible" data-collapsed="false">
<h1>點擊我 - 我可以折疊!</h1>
<p>I'm 現(xiàn)在我默認是展開的。</p>
</div>
<h1>點擊我 - 我可以折疊!</h1>
<p>I'm 現(xiàn)在我默認是展開的。</p>
</div>
嘗試一下 ?
嵌套可折疊塊
可折疊的內(nèi)容塊是可以彼此嵌套的：
實例
<div data-role="collapsible">
<h1>點擊我 - 我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
<div data-role="collapsible">
<h1>點擊我 - 我是嵌套的可折疊塊！</h1>
<p>我是嵌套的可折疊塊中被展開的內(nèi)容。</p>
</div>
</div>
<h1>點擊我 - 我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
<div data-role="collapsible">
<h1>點擊我 - 我是嵌套的可折疊塊！</h1>
<p>我是嵌套的可折疊塊中被展開的內(nèi)容。</p>
</div>
</div>
嘗試一下 ?
 | 可折疊的內(nèi)容塊可以根據(jù)您的需要進行多次嵌套。 |
|---|
可折疊集合
可折疊集合是將可折疊塊組合在一起（就像手風琴一樣）。當一個新的塊被展開時，所有其他的塊都會被折疊起來。
創(chuàng)建若干個可折疊的內(nèi)容塊，然后把可折疊內(nèi)容塊用帶有 data-role="collapsible-set" 的新容器包圍起來：
實例
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>點擊我 - 我可以折疊！</h1>
<p>我是被展開的內(nèi)容。</p>
</div>
<div data-role="collapsible">
<h1>點擊我 - 我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
</div>
</div>
<div data-role="collapsible">
<h1>點擊我 - 我可以折疊！</h1>
<p>我是被展開的內(nèi)容。</p>
</div>
<div data-role="collapsible">
<h1>點擊我 - 我可以折疊!</h1>
<p>我是被展開的內(nèi)容。</p>
</div>
</div>
嘗試一下 ?
更多實例
通過 data-inset 屬性取消圓角
如何取消可折疊塊上的圓角。
通過 data-mini 屬性迷你化可折疊塊
如何讓可折疊塊更小。
通過 data-collapsed-icon 和 data-expanded-icon 改變圖標
如何改變可折疊塊的圖標（默認是 + 和 -）。
你可以通過練習上述的實例來進一步認識jQuery Mobile可折疊塊！
以上內(nèi)容是否對您有幫助：
更多建議：