如今，移動(dòng)端網(wǎng)站越來越常見，而 jQuery Mobile 作為移動(dòng)端 Web 應(yīng)用程序的第一選擇， 其獨(dú)特的設(shè)計(jì)風(fēng)格及友好的用戶交互體驗(yàn)，備受開發(fā)者喜愛。而在 jQuery Mobile 中，二級(jí)菜單是一個(gè)非常重要的組件，它能夠方便地整合多個(gè)子菜單，讓網(wǎng)站更加美觀簡(jiǎn)潔。

要?jiǎng)?chuàng)建一個(gè)二級(jí)菜單，我們需要寫出以下代碼：

<div data-role="panel" id="myPanel">
<ul data-role="listview" data-inset="true">
<li data-role="collapsible">
<h2>主菜單</h2>
<ul data-role="listview">
<li><a href="#">子菜單1</a></li>
<li><a href="#">子菜單2</a></li>
<li><a href="#">子菜單3</a></li>
</ul>
</li>
</ul>
</div>

在這段代碼中，我們使用了 data-role 屬性及 id 屬性來定義了一個(gè) panel，而在該 panel 中，我們又定義了一個(gè)包含三個(gè)子菜單項(xiàng)的 collapsible，當(dāng)用戶點(diǎn)擊主菜單時(shí)，該 collapsible 會(huì)展開顯示三個(gè)子菜單項(xiàng)。

需要注意的是，上述代碼中的 listview 用于初始化每個(gè)菜單項(xiàng)，并定義了列表中的元素樣式。而 collapsible 用于創(chuàng)建展開菜單，其 data-role 屬性應(yīng)設(shè)置為“collapsible”。