可能我们在开发中遇到过这样的问题，我们只是看到一个题目或者简单的介绍，然后一点击会在下面展开对应的详细的内容。在jqm中实现这个效果很简单。下面给出一段例子代码：

<!DOCTYPE html>

<html>

<head>

<title>Collapsible Content - 2</title>

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

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />

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

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

</head>

<body>

<div data-role="page" id="first">

    <div data-role="header">

        <h1>Collapsible Test</h1>

    </div>

    <div data-role="content">

        <div data-role="collapsible">

            <h3>First</h3>

            <p>

                Hello World...

            </p>

        </div>

        <div data-role="collapsible">

            <h3>First</h3>

            <p>

                Hello World...

            </p>

        </div>

        <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">

            <h3>First</h3>

            <p>

                Hello World...

            </p>

        </div>

        <div data-role="collapsible" data-content-theme="c" data-iconpos="right">

              <h3>First</h3>

              <p>

                Hello World again...

              </p>

          </div>

    </div>

</div>

</body>

</html>

页面显示如下：第一个未点开，第二、三、四个都点击开了。

第三个使用了data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"修改icon。

第四个使用data-content-theme="c"修改显示的主题，使其内容被带有边框的内容包围。 data-iconpos="right"使icon显示在右边。

我们可以将所有带有data-role="collapsible"属性的div，包围在一个<div data-role="collapsible-set">中，使其组成一个整体，但是这样点击其中一个的时候，其他的会自动关闭。这样的显示效果如下：

jquerymobile-可折叠内容(Collapsible content)的更多相关文章

  1. 电子商务(电销)平台中内容模块(Content)数据库设计明细

    以下是自己在电子商务系统设计中的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 文章表 (article)|-- 自动编号|-- 文章标题 (title)|-- 文章类别编号 (c ...

  2. 内容提供者Content Provider

    *读取联系人 StringBuilder sb = new StringBuilder(); // 1:得到中间人. ContentResolver resolver = getContentReso ...

  3. dede首页调用栏目内容{dedefield.content}的方法

    Dedecms的功能确实很强大,但是dedecms的全局变量有字节限制,使得我们在使用dedecms制作企业站的时候,首页无法调用大段大段的企业站. 其实dedecms还有另外一种调用大段内容的方法, ...

  4. Confluence 6 数据库表-内容（Content）

    这部分的内容描述了有关 Confluence 存储内容所使用的表格.内容是用户在 Confluence 存储和分享的信息. attachmentdata 附件文件的二进制数据.当 Confluence ...

  5. SAP CRM和C4C的内容管理(Content Management)

    SAP CRM内容管理 SAP CRM使用Attachments这个UI给用户提供内容管理的功能.通过新建按钮可以上传本地文档到CRM系统: 该内容管理支持简单的版本管理功能,用户可点击Check O ...

  6. sharepoint 2010 如何创建文档库内容类型content type

    转:http://biancheng.dnbcw.info/linux/441643.html 这次主要是记录下,如何来创建文档内容类型,例如新建文档的时候,可以选择不同模板,有word,excel文 ...

  7. DVWA 黑客攻防实战（十五） 绕过内容安全策略 Content Security Policy (CSP) Bypass

    看到标题,是否有点疑惑 CPS 是什么东东.简单介绍一下就是浏览器的安全策略,如果 标签,或者是服务器中返回 HTTP 头中有 Content-Security-Policy 标签 ,浏览器会根据标签 ...

  8. Eclipse代码自动提示（内容辅助content assist）

    Eclipse中默认是输入"."后出现自动提示,用于类成员的自动提示,可是有时候我们希望它能在我们输入类的首字母后就出现自动提示,可以节省大量的输入时间(虽然按alt + /会出现 ...

  9. net5：Theme主题样式的动态变换，在内容页content中操作影响模板页的操作

    原文发布时间为:2008-07-29 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

随机推荐

  1. 粘滞位（sticky bit）

    linux特殊权限:setUid, setGid, 粘着位(sticky) (1)目录的X权限(执行) 文件的可执行权限很简单,也就是可否执行它的意思,但目录的执行权限又代表什么意思呢? 当然不可能是 ...

  2. hdu 1009 贪心算法

    博主英语不好,看懂个大概,老鼠有M磅猫食.有N个房间,每个房间前有一只猫,房间里有老鼠最喜欢的食品JavaBean,J[i].若要引开猫,必须付出相应的猫食F[i]. 当然这只老鼠没必要每次都付出所有 ...

  3. iOS性能调优

    写在前面 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/ ...

  4. 定位 - MapKit-自定义大头针

    #import <Foundation/Foundation.h> #import <MapKit/MapKit.h> @interface PPAnnotation : NS ...

  5. Computer Vision Applied to Super Resolution

    Capel, David, and Andrew Zisserman. "Computer vision applied to super resolution." Signal ...

  6. 用Thread类创建线程-2

    支持原创,本系列文章均转自:http://www.blogjava.net/nokiaguy/category/38172.html 在Java中创建线程有两种方法:使用Thread类和使用Runna ...

  7. Servlet高级应用---Servlet与缓存

    一]设置缓存文件的有效日期        重点方法:            HttpServletRequest类:                    1>String getRequest ...

  8. android 对象传输及parcel机制

    在开发中不少要用到Activity直接传输对象,下面我们来看看,其实跟java里面差不多   自定义对象的传递:通过intent传递自定义对象的方法有两个  第一是实现Serialization接口: ...

  9. HDU-1045 Fire Net

    http://acm.hdu.edu.cn/showproblem.php?pid=1045 Fire Net Time Limit: 2000/1000 MS (Java/Others)    Me ...

  10. linux之cut用法

    转载:http://www.cnblogs.com/dong008259/archive/2011/12/09/2282679.html cut是一个选取命令,就是将一段数据经过分析,取出我们想要的. ...