JQuery 創建可摺疊效果的菜單

要創建內容摺疊塊。首先，創建一個容器，並添加 data-role="collapsible" 屬性。並且給此容器使用 data-content-theme 屬性，爲可摺疊的內容塊，進行主題樣式設計。

其次，在容器中，添加任何頭部區域的標題（h1-h6）或圖例元素(egend element)。JQuery Mobile框架將樣式化頭部，使其看起來像一個可點擊的按鈕，並添加一個“+”圖標左邊表示它的膨脹。

最後，在頭部區域後，添加任何HTML標記作爲被摺疊的內容區域。JQuery Mobile框架將把這個標記爲包裹起來。當點擊頭部標題的時候，內容將被摺疊隱藏或者顯示出來。

默認情況下，內容是被摺疊起來的。

<div data-role="collapsible">
  <h3>I'm a header</h3>
  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

摺疊起來的樣式

點擊被打開樣式

  

展開摺疊 data-collapsed="false"

默認情況下，可摺疊容器是收縮的，可以通過通過點擊頭部展開。給容器添加 data-collapsed="false" 屬性，可實現當加載頁面的時候，摺疊內容區域爲展開樣式。

<div data-role="collapsible" data-collapsed="false" >

  

取消圓角 data-inset="false"

默認情況下摺疊區域有插圖的外觀（兩頭有圓角等）。若要讓他們全屏寬度無角造型，給容器添加 data-inset="false" 屬性。

<div data-role="collapsible" data-inset="false" >

  

迷你型 data-mini="true"

一個更緊湊的版本，在工具欄和緊空間是有用的，添加 data-mini="true" 屬性即可

<div data-role="collapsible" data-mini="true" >

  

自定義圖標 data-collapsed-icon

可摺疊的標題的默認圖標可以通過使用data-collapsed-icon和data-expanded-icon屬性數據擴展。

在以下情況下，data-collapsed-icon="arrow-r"和data-expanded-icon="arrow-d"。

<div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
	<h3>I have custom icons</h3>
	<p><code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code></p>
</div>

展開前的效果

展開後的效果

  

圖標定位 data-iconpos

默認情況下，圖標位於左側。但可是使用 data-iconpos 屬性來自定義。下例子中，使用了data-iconpos="right"來自定義：

<div data-role="collapsible" data-iconpos="right">
	<h3>I'm a header</h3>
	<p><code>data-iconpos="right"</code></p>
</div>

  

摺疊內容區的主題樣式 data-content-theme

在可摺疊的標題和內容之間，提供一個強大的視覺美化效果，給容器添加 data-content-theme 屬性的和指定的主題樣本的字母（如，a、b、c、d、e）。使內容塊有：邊界線和平坦的背景顏色（非漸變色）和底部圓角。使他們看起來像是一組。

<div data-role="collapsible" data-content-theme="c">
  <h3>Header</h3>
  <p>I'm the collapsible content with a themed content block set to "c".</p>
</div>

展開前的效果

展開後的效果

  

摺疊標題區的主題樣式 data-theme

設置在一個可摺疊的主題標題按鈕，添加 data-theme 屬性的包裝和指定一個樣本的字母（如，a、b、c、d、e）。請注意，你可以分別設置標題和內容的這些主題匹配屬性。

<div data-role="collapsible" data-theme="a" data-content-theme="a">
  <h3>Header swatch A</h3>
  <p>I'm the collapsible content with a themed content block set to "a".</p>
</div>

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h3>Header swatch B</h3>
  <p>I'm the collapsible content with a themed content block set to "b".</p>
</div>

展開前的效果

展開後的效果

  

嵌套摺疊區

根據需要摺疊區可以彼此嵌套。在下面例子中，我們設置的內容主題提供清晰的視覺效果。

 

		<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
			<h3>I'm a header</h3>
			<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			
			<div data-role="collapsible" data-theme="c" data-content-theme="c">
				<h3>I'm a nested collapsible with a child collapsible</h3>
				<p>I'm a child collapsible.</p>
					<div data-role="collapsible" data-theme="d" data-content-theme="d">
						<h3>Nested inside again.</h3>
						<p>Three levels deep now.</p>
					</div><!-- /section 1A -->
			</div><!-- /section 1 -->
			
			<div data-role="collapsible" data-content-theme="c">
				<h3>Section 3: Form elements</h3>
				<form action="#" method="get">
					<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
					</div>
					<div data-role="fieldcontain">
						<label for="slider">Input slider:</label>
					 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
					</div>
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
				    </fieldset>
				</form>
			</div><!-- /section 2 -->
			<div data-role="collapsible" data-content-theme="c">
				<h3>Section 4: Collapsed list</h3>
				<p>Here is an inset list:</p>
				<ul data-role="listview" data-inset="true" data-theme="d">
					<li><a href="index.html">Acura</a></li>
					<li><a href="index.html">Audi</a></li>
					<li><a href="index.html">BMW</a></li>
					<li><a href="index.html">Cadillac</a></li>
					<li><a href="index.html">Chrysler</a></li>
					<li><a href="index.html">Dodge</a></li>
					<li><a href="index.html">Ferrari</a></li>
					<li><a href="index.html">Ford</a></li>
				</ul>
			</div><!-- /section 3 -->
		</div>

展開前的效果

展開後的效果