可折疊內(nèi)容塊

可折疊塊允許您隱藏或顯示內(nèi)容 - 對(duì)于存儲(chǔ)部分信息很有用。

如需創(chuàng)建一個(gè)可折疊的內(nèi)容塊，需要為容器添加 data-role="collapsible" 屬性。在容器（div）內(nèi)，添加一個(gè)標(biāo)題元素（H1-H6），后跟您想要進(jìn)行擴(kuò)展的 HTML 標(biāo)記：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折疊塊</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>點(diǎn)擊我 - 我可以折疊！</h1>
      <p>我是可折疊的內(nèi)容。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳文本</h1>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

默認(rèn)情況下，內(nèi)容是被折疊起來(lái)的。如需在頁(yè)面加載時(shí)展開(kāi)內(nèi)容，請(qǐng)使用 data-collapsed="false"：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折疊塊</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible" data-collapsed="false">
      <h1>點(diǎn)擊我 - 我可以折疊！</h1>
      <p>我是可折疊的內(nèi)容。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

嵌套可折疊塊

可折疊的內(nèi)容塊是可以彼此嵌套的：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>嵌套的可折疊塊</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>點(diǎn)擊我 - 我可以折疊！</h1>
      <p>我是可折疊的內(nèi)容。</p>
      <div data-role="collapsible">
        <h1>點(diǎn)擊我 - 我是嵌套的可折疊塊！</h1>
        <p>我是嵌套的可折疊塊中被展開(kāi)的內(nèi)容。</p>
      </div>
    </div>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳文本</h1>
  </div>
</div> 


</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例



可折疊的內(nèi)容塊可以根據(jù)您的需要進(jìn)行多次嵌套。

可折疊集合

可折疊集合是將可折疊塊組合在一起（就像手風(fēng)琴一樣）。當(dāng)一個(gè)新的塊被展開(kāi)時(shí)，所有其他的塊都會(huì)被折疊起來(lái)。

創(chuàng)建若干個(gè)可折疊的內(nèi)容塊，然后把可折疊內(nèi)容塊用帶有 data-role="collapsible-set" 的新容器包圍起來(lái)：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折疊集</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsibleset">
      <div data-role="collapsible">
        <h3>點(diǎn)擊我 - 我可以折疊！</h3>
        <p>我是可折疊的內(nèi)容。</p>
      </div>
      <div data-role="collapsible">
        <h3>點(diǎn)擊我 - 我可以折疊！</h3>
        <p>我是可折疊的內(nèi)容。</p>
      </div>
      <div data-role="collapsible">
        <h3>點(diǎn)擊我 - 我可以折疊！</h3>
        <p>我是可折疊的內(nèi)容。</p>
      </div>
      <div data-role="collapsible">
        <h3>點(diǎn)擊我 - 我可以折疊！</h3>
        <p>我是可折疊的內(nèi)容。</p>
      </div>
    </div>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳內(nèi)容</h1>
  </div>
</div> 


</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

更多實(shí)例

通過(guò) data-inset 屬性取消圓角與外邊距

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折疊的 data-inset</h1>
  </div>

  <div data-role="main" class="ui-content">
    <h2>帶有圓角的可折疊內(nèi)容塊:</h2>
    <div data-role="collapsible">
      <h1>這是有圓角的可折疊內(nèi)容塊。</h1>
      <p>默認(rèn)地，可折疊塊帶有包含外邊距的圓角，使用 data-inset="false" 可去掉外邊距與圓角。</p>
    </div>

    <h2>沒(méi)有圓角的可折疊內(nèi)容塊：</h2>
    <div data-role="collapsible" data-inset="false">
      <h1>這是沒(méi)有圓角的可折疊內(nèi)容塊。</h1>
      <p>默認(rèn)地，可折疊塊帶有包含外邊距的圓角，使用 data-inset="false" 可去掉外邊距與圓角。</p>
    </div>
    <br>

    <h2>沒(méi)有圓角的可折疊集合:</h2>
    <div data-role="collapsibleset">
      <div data-role="collapsible" data-inset="false">
        <h3>點(diǎn)擊我 - 我可以折疊！</h3>
        <p>我是可折疊的內(nèi)容。</p>
      </div>
      <div data-role="collapsible" data-inset="false">
        <h3>點(diǎn)擊我 - 我可以折疊！</h3>
        <p>我是可折疊的內(nèi)容。</p>
      </div>
      <div data-role="collapsible" data-inset="false">
        <h3>點(diǎn)擊我 - 我可以折疊！</h3>
        <p>我是可折疊的內(nèi)容。</p>
      </div>
      <div data-role="collapsible" data-inset="false">
        <h3>點(diǎn)擊我 - 我可以折疊！</h3>
        <p>我是可折疊的內(nèi)容。</p>
      </div>
    </div>
  </div>
   
  <div data-role="footer">
    <h1>底部文本</h1>
  </div>  
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

如何取消可折疊塊上的圓角與外邊距。

通過(guò) data-mini 屬性迷你化可折疊塊

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折疊塊</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible" data-mini="true">
      <h1>點(diǎn)擊我 - 我是可折疊的！</h1>
      <p>我是可折疊的內(nèi)容。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳</h1>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

如何讓可折疊塊更小。

通過(guò) data-collapsed-icon 和 data-expanded-icon 改變圖標(biāo)

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>可折疊塊</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
      <h1>data-collapsed-icon 規(guī)定按鈕的圖標(biāo)。</h1>
      <p>data-expanded-icon 規(guī)定內(nèi)容被展開(kāi)時(shí)按鈕的圖標(biāo)。</p>
    </div>
  </div>
  
  <div data-role="footer">
    <h1>頁(yè)腳</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

如何改變可折疊塊的圖標(biāo)（默認(rèn)是 + 和 -）。

彈窗中使用折疊
在彈窗中創(chuàng)建折疊項(xiàng)。

修改圖標(biāo)位置
在折疊項(xiàng)中如何修改圖標(biāo)的位置 (默認(rèn)為在左邊)。