代码演示

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

    appendGrid appendGrid的使用

  2. 安装Maven、nexus

    一.软件包版本 jdk:jdk1.7.0_79 maven:apache-maven-3.3.3-bin.tar.gz nexus:nexus-webapp-2.8.0-05.war 二.安装mave ...

  3. winsock 收发广播包

    ☛广播包的概念 广播包通常为了如下两个原因使用:1 一个应用程序希望在本地网络中找到一个资源,而应用程序对于该资源的地址又没有任何先验的知识. 2 一些重要的功能,例如路由要求把它们的信息发送给所有找 ...

  4. 数据结构(主席树)：COGS 2213. K个串

    2213. K个串 ★★★★   输入文件:bzoj_4504.in   输出文件:bzoj_4504.out   简单对比时间限制:20 s   内存限制:512 MB [题目描述] 兔子们在玩k个 ...

  5. 图论(对偶图)：COGS 470. [NOI2010]海拔

    470. [NOI2010]海拔 ★★★☆   输入文件:altitude.in   输出文件:altitude.out   简单对比 时间限制:2 s   内存限制:512 MB 海拔 [问题描述] ...

  6. 【动态规划】Vijos P1037 搭建双塔

    题目链接: https://vijos.org/p/1037 题目大意: 给n块砖的长度(n<=100),问从中任选m块砖能否建成2个相同高度的塔. 能的话求最高高度,不能输出 Impossib ...

  7. ARM启动流程

    S3C2440支持两种启动方式:norflash启动和nandflash启动. 一.norflash启动 NOR Flash 的特点是芯片内执行(XIP ,eXecute In Place),这样应用 ...

  8. hdu 1175 连连看 DFS

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1175 解题思路:从出发点开始DFS.出发点与终点中间只能通过0相连,或者直接相连,判断能否找出这样的路 ...

  9. zoj 2706 线段树

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1706 trick:关于正数和负数的整除问题,正数整除是自动向下取整的 ...

  10. java编译期优化与执行期优化技术浅析

    java语言的"编译期"是一段不确定的过程.由于它可能指的是前端编译器把java文件转变成class字节码文件的过程,也可能指的是虚拟机后端执行期间编译器(JIT)把字节码转变成机 ...