jquery mobile展开项collapsible
代码演示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> 7 <script src="http://code.jquery.com/jquery-1.5.min.js"></script> 8 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 9 </head> 10 <body> 11 <div data-role="page"> 12 <div data-role="header"> 13 <h1>头</h1> 14 </div> 15 <div data-role="content"> 16 <div data-role="collapsible" data-collapsed="false"> 17 <!-- data-collapsed="false"为默认展开--> 18 <!-- 带有 data-role="collapsible-set" 属性的容器中的可折叠内容块。 --> 19 <h4>heading</h4> 20 <p>展开的内容区域</p> 21 </div> 22 <div data-role="collapsible" data-content-theme="true"> 23 <h4>heading</h4> 24 <p>我真的展开了吗</p> 25 </div> 26 </div> 27 <!-- 展开的列表 --> 28 <div data-role="collapsible"> 29 <h1>系列</h1> 30 <ul data-role="listview"><!-- 无序列表 --> 31 <li><a href="#">1</a></li> 32 <li><a href="#">1</a></li> 33 <li><a href="#">1</a></li> 34 </ul> 35 </div> 36 <div data-role="footer"> 37 <h1>底部</h1> 38 </div> 39 </div> 40 </body> 41 </html>
data-collapsed="false"为默认展开
带有 data-role="collapsible-set" 属性的容器中的可折叠内容块。
显示结果
