代码演示

 <!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. bzoj3230

    以前觉得这题好难,现在觉得这题还是挺简单首先看到类似LCP问题不难想到后缀数组吧前后的相似需要我们分别做一个后缀数组和“前缀数组”(就是把字符串反向然后跑后缀数组)这道题的难点就在于如何确定子串是什么 ...

  2. Light OJ 1017 - Brush (III)

    题目大意:     在一个二维平面上有N个点,散落在这个平面上.现在要清理这些点.有一个刷子刷子的宽度是w. 刷子上连着一根绳子,刷子可以水平的移动(在X轴方向上).他可以把刷子放在任何一个地方然后开 ...

  3. 搜索(DLX)：HOJ 1017 - Exact cover

    1017 - Exact cover Time Limit: 15s Memory Limit: 128MB Special Judge Submissions: 6751 Solved: 3519 ...

  4. AC自动机(Aho-Corasick automation)模板 HDU：2222

    #include <iostream> #include <cstdio> #include <cstring> #include <queue> us ...

  5. 【转】C/C++ 内存对齐

    [转自]http://wenku.baidu.com/view/8eaaa26925c52cc58bd6bed2.htmlC/C++内存对齐 一.什么是字节对齐,为什么要对齐? 现代计算机中内存空间都 ...

  6. kafka中对一个topic增加replicas

    是指手动写扩充replicas的配置文件,然后使用工具进行操作. 参考官网site:http://kafka.apache.org/documentation.html#basic_ops_autom ...

  7. C字符数组及其应用

    1.字符数组和其他数值类型的数组的定义引用和初始化都是相同的. 特别注意的是: 在C语言中没有专门的字符串变量,通常用一个字符数组来存放一个字符串. \0'是由C编译系统自动加上的. 2. C语言允许 ...

  8. Ubuntu中Nginx的安装与配置

    原文地址:http://www.cnblogs.com/languoliang/archive/2013/04/01/nginx.html 1.Nginx介绍 Nginx是一个非常轻量级的HTTP服务 ...

  9. UVALive 5983 MAGRID

    题意:在一个n*m的网格上,从(0,0)走到(n-1,m-1),每次只能向右或者向下走一格.一个人最初有一个生命值x,走到每一个格生命值会变为x + s[i][j],(s[i][j]可为负,0,正), ...

  10. [置顶] Ajax程序：处理异步调用中的异常(使用Asp.Net Ajax内建的异常处理方法)

    无论在Window应用程序,还是Web应用程序以对用户友好的方式显示运行时的异常都是很有必要,尤其对于可能有很多不确定因素导致异常的Web应用程序;在传统的Web开发中,处理异常的方式——设计专门一个 ...