VeryOK建站教程

jQuery Mobile 可折疊

可折疊的內容塊

可折疊(Collapsibles)允許您隱藏或顯示內容 - 對于存儲部分信息很有用。

如需創建可折疊的內容塊,請向某個容器分配 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>現在我默認是展開的。</p>
</div>

親自試一試

嵌套的可折疊塊

可以嵌套可折疊內容塊:

實例

<div data-role="collapsible">
  <h1>點擊我 - 我可以折疊!</h1>
  <p>我是被展開的內容。</p>
  <div data-role="collapsible">
    <h1>點擊我 - 我是嵌套的可折疊塊!</h1>
    <p>我是嵌套的可折疊塊中被展開的內容。</p>
  </div>
</div>

親自試一試

提示:可折疊內容塊可以被嵌套您希望的任意次數。

可折疊集合

可折疊集合(Collapsible sets)指的是被組合在一起的可折疊塊(常被稱為手風琴)。當新塊被打開時,所有其他塊會關閉。

創建若干內容塊,然后通過 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 屬性來刪除圓角
如何移除 collapsibles 上的圓角。
通過 data-mini 最小化 collapsibles
如何使 collapsibles 更小巧。
通過 data-collapsed-icon 和 data-expanded-icon 改變圖標
如何改變 collapsibles 的圖標(默認是 + 和 -)。
江西时时彩交易时间