首頁 > 開發者 > JavaScript
jquery mobile實現可摺疊的導覽按鈕，jquery可摺疊
本文執行個體為大家分享了jquery實現可摺疊的導覽按鈕的具體代碼，供大家參考，具體內容如下
功能：
當功能較多時，建立可摺疊分組導覽按鈕。只需指定 data-role=" collapsible "建立可摺疊面板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可摺疊的導航面板</title> <!--使用名為viewport的meta值，其content指定自適應裝置的寬度--> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>圖書查閱系統</h1> </div> <!--建立一個可摺疊的導航面板--> <div data-role="content"> <div data-role="collapsible" data-theme="e"> <h4>文學曆史</h4> <ul data-role="listview"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >明代</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >宋代</a></li> </ul> </div> <!--顯示人文社科的可摺疊面板--> <div data-role="collapsible" data-theme="b" data-collapsed="false"> <h4>人文社科</h4> <ul data-role="listview"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >財務</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >心理</a></li> </ul> </div> <!--顯示電腦應用的可摺疊面板--> <div data-role="collapsible" data-theme="e"> <h4>電腦應用</h4> <ul data-role="listview"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >軟體開發</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >資料庫</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >移動開發</a></li> </ul> </div> </div> <div data-role="footer" data-position="fixed"> <h1>請單擊“+”按鈕進行展開</h1> </div> </div> </body> </html>
程式碼分析：
通過data-role=" collapsible "建立可摺疊的div，再在其中通過 data-role=" listview "建立列表框
data-theme : 指定預定義樣式 （也可以使用樣式構建器建立自訂樣式）
data-collapsed="false" : 表示預設不摺疊
：
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
