代码演示

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1">

       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">

       <script src="http://code.jquery.com/jquery-1.5.min.js"></script>

       <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

 </head>

 <body>

 <div data-role="page">

     <div data-role="header">

         <h1>头</h1>

     </div>

     <div data-role="content">

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

         <!--  data-collapsed="false"为默认展开-->

         <!-- 带有 data-role="collapsible-set" 属性的容器中的可折叠内容块。 -->

             <h4>heading</h4>

             <p>展开的内容区域</p>

         </div>

         <div data-role="collapsible" data-content-theme="true">

             <h4>heading</h4>

             <p>我真的展开了吗</p>

         </div>

     </div>

     <!-- 展开的列表 -->

     <div data-role="collapsible">

         <h1>系列</h1>

         <ul data-role="listview"><!-- 无序列表 -->

             <li><a href="#">1</a></li>

             <li><a href="#">1</a></li>

             <li><a href="#">1</a></li>

         </ul>

     </div>

     <div data-role="footer">

         <h1>底部</h1>

     </div>

 </div>

 </body>

 </html>

data-collapsed="false"为默认展开

带有 data-role="collapsible-set" 属性的容器中的可折叠内容块。

显示结果

jquery mobile展开项collapsible的更多相关文章

  1. jquery.mobile 中 collapsible-set collapsible listview 共同布局问题

    最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左 ...

  2. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

  3. jQuery Mobile 基础(第二章）

    1.可折叠块: <div data-role="collapsible"> <h1>点击我 - 我可以折叠!</h1> <p>我是可 ...

  4. 第十三篇、jQuery Mobile

    API-->搜索data 0.page data-transition="slide" // 页面切换效果 data-position="fixed" / ...

  5. jQuery Mobile 所有data-*选项，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...

  6. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  7. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  8. jQuery Mobile 列表内容

    jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...

  9. Jquery Mobile 学习笔记(一)

    1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...

随机推荐

  1. Ubuntu 12.04 下安装 Eclipse

    方法一:(缺点是安装时附加openjdk等大量程序并无法去除,优点是安装简单) $ sudo apt-get install eclipse 方法二:(优点是安装内容清爽,缺点是配置麻烦)1.安装JD ...

  2. Windows7 搜索功能关闭了，怎么重新打开

    你的搜索功能被关闭了,打开cmd.exe,进入windows\system32输入OptionalFeatures.exe,里面有搜索功能选项,选择他.重新启动.

  3. Python 列表排序方法reverse、sort、sorted详解

    python语言中的列表排序方法有三个:reverse反转/倒序排序.sort正序排序.sorted可以获取排序后的列表.在更高级列表排序中,后两中方法还可以加入条件参数进行排序. reverse() ...

  4. backgroundworker组件的使用

    本文转载:http://www.cnblogs.com/inforasc/archive/2009/10/12/1582110.html BackgroundWorker 组件用来执行诸如数据库事务. ...

  5. 【足迹C++primer】表达式求值

    表达式求值 /** * 功能:表达式求值(0到9) * 时间:2014年6月15日08:02:31 * 作者:cutter_point */ #include<stdlib.h> #inc ...

  6. [转] Maven镜像配置

    参考:许晓斌的<Maven实战> 镜像是为了提供更快的服务 如图:X就认为是Y的一个镜像. 编辑settings.xml配置中央仓库镜像: <settings> ... < ...

  7. 非空验证（源代码Java版）

    import java.util.Map; /** * 非空验证工具类 */ public class UntilEmpty { /** * @see: 验证string类型的是否为空 */ publ ...

  8. Java基础知识强化之IO流笔记11：递归之递归概述和注意事项

    1. 递归: 方法定义中调用方法本身的现象. e.g: public void show(int n ) { if(n <= 0) { System.exit(0); } System.out. ...

  9. vsftp配置主动模式和被动模式

    配置文件:/etc/vsftpd/vsftpd.conf 主动模式配置方法: 主动式连接使用的数据通道 connect_from_port_20=YES 支持数据流的被动式连接模式 pasv_enab ...

  10. Android MediaCodec 使用例子

    Android MediaCodec 使用例子 下面的例子是使用MediaCodec 录制到文件的例子. 1 public class AvcEncoder { private MediaCodec ...