代码演示

 <!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. spoj-694-Distinct Substrings(后缀数组)

    题意: 给定一个字符串,求不相同的子串的个数 分析: 每个子串一定是某个后缀的前缀,那么原问题等价于求所有后缀之间的不相同 的 前 缀 的 个 数 . 如 果 所 有 的 后 缀 按 照 suffix ...

  2. 【转】Jollen 的 Android 教學,#12: 如何建立選單 Menu

    原文网址:http://www.jollen.org/blog/2009/06/jollen-android-programming-12.html Android應用程式的UI可以使用XML來定義, ...

  3. Oracle 11g ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务

    1. 找到listener.ora监听文件,具体位置:D:\app\Administrator\product\11.2.0\dbhome_1\NETWORK\ADMIN\listener.ora 2 ...

  4. cf702C Cellular Network

    C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  5. 简单的FOLLOW集演示程序

    /* * 该程序用于计算某个非终结符的 FOLLOW 集合 * RexfieldVon * 2013年6月30日16:02:47 */ #include <stdio.h> #includ ...

  6. zoj 2404 最小费用流

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2404 #include <cstdio> #incl ...

  7. [置顶] android 图片库的封装

    大家在做安卓应用的时候  经常要从网络中获取图片 都是通过URL去获取 可是如果本地有图片数据 从本地获取数据不更加快一些  自己在工作中遇到这个问题 所以采用了一个URL和本地图片的一个映射关系  ...

  8. 笔试之Linux命令的使用

    1. awk文本处理工具,显示ps的最后两列 ps -ef|awk '{print $1,$2}' 打印第一和第二域  $0是全域 2. Linux下查看内存使用情况 free

  9. Python多进程使用

    [Python之旅]第六篇(六):Python多进程使用   香飘叶子 2016-05-10 10:57:50 浏览190 评论0 python 多进程 多进程通信 摘要:   关于进程与线程的对比, ...

  10. 2015 Multi-University Training Contest 5

    #include <iostream> //1002 #include<set> #include<stdio.h> using namespace std; co ...