代码演示

 <!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. HDOJ(HDU) 2153 仙人球的残影(谜一样的题、、、)

    Problem Description 在美丽的HDU,有一名大三的同学,他的速度是众所周知的,跑100米仅仅用了2秒47,在他跑步过程中会留下残影的哎,大家很想知道他是谁了吧,他叫仙人球,既然名字这 ...

  2. SRM 405(1-250pt, 1-500pt)

    DIV1 250pt 题意:以linux系统中文件系统的路径表示方法为背景,告诉你某文件的绝对路径和当前位置,求相对路径.具体看样例. 解法:模拟题,不多说.每次碰到STL的题自己的代码都会显得很sb ...

  3. ubuntu12编译openwrt

    搭建编译环境 Ubuntu x64 12.04下的命令: sudo apt-get install subversion sudo apt-get install git sudo apt-get i ...

  4. XML相关概念

    XML:可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言. XSL:XSL = XML 样式表.XSL 之于XML,就像CSS之于HTML.它是指可扩展样式语言 ...

  5. Maven deploy

      1.在maven/conf/setting.xml中: 在<servers>中加入 <server> <id>internal</id> <u ...

  6. mysql忘记root密码 + 授权登录

    一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password "test123"E ...

  7. 提升ReSharper和Visual Studio的性能

    转载 作者:赵青青        出处:http://www.cnblogs.com/zhaoqingqing/ 文章目录[点击展开](?)[+]   提升性能 我们不断地确保ReSharper的正常 ...

  8. 概率dp-九度-1546-迷宫问题

    题目链接: http://ac.jobdu.com/problem.php?pid=1546 题目意思: 有一个起点S,多个出口E,#代表不能走,每次等概率的随机选择下一个可以行走的位置,求从S到出口 ...

  9. SEO为什么越来越难？

    不是很长的折腾seo该,无脑想如何很长的头发外链,一方面,没有花费的时间SEO在,另一方面SEO越来越难,的另一个方面,也SEO特征,不可控和不可预测性,致使我们花了非常多的情况下,SEO大部分时间都 ...

  10. Linux 内核的文件 Cache 管理机制介绍-ibm

    https://www.ibm.com/developerworks/cn/linux/l-cache/ 1 前言 自从诞生以来,Linux 就被不断完善和普及,目前它已经成为主流通用操作系统之一,使 ...