可能我们在开发中遇到过这样的问题，我们只是看到一个题目或者简单的介绍，然后一点击会在下面展开对应的详细的内容。在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. ubuntu导出文件

    ye@aliyun:python$ ./deploy.sh backup static-rw-r--r-- 1 ye ye 174K 2014-03-22 10:36 ./backup/fbz_sta ...

  2. PHP5.6.x的新鲜事

    PHP5.6.x的新鲜事 期中考回来,刷刷php.net,发现——又更新了..现在马上来看一下What's New in PHP 5.6.x 内部操作符重载(internal-operator-ove ...

  3. IntelliJ 一键添加双引号

    IntelliJ IDEA(目前最新版本为2016.2.5) 不直接支持一键向选取内容添加双引号,但可以通过配置 Live Template 实现此功能. 以下为配置方法(针对2016.2.5版,其它 ...

  4. 图表插件——Highcharts插件的使用（一柱状图）

    1.下载Highcharts插件 官方下载网址:http://www.highcharts.com/download 2.引入需要的js文件 <script src="~/Script ...

  5. bzoj 2107: Spoj2832 Find The Determinant III 辗转相除法

    2107: Spoj2832 Find The Determinant III Time Limit: 1 Sec  Memory Limit: 259 MBSubmit: 154  Solved: ...

  6. uva 1308 - Viva Confetti

    这个题目的方法是将圆盘分成一个个圆环,然后判断这些圆环是否被上面的圆覆盖: 如果这个圆的圆周上的圆弧都被上面的覆盖,暂时把它标记为不可见: 然后如果他的头上有个圆,他有个圆弧可见,那么他自己本身可见, ...

  7. 【Tools】Pro Git 一二章读书笔记

    记得知乎以前有个问题说:如果用一天的时间学习一门技能,选什么好?里面有个说学会Git是个很不错选择,今天就抽时间感受下Git的魅力吧.   Pro Git (Scott Chacon) 读书笔记:   ...

  8. [LeetCode#157] Read N Characters Given Read4

    Problem: The API: int read4(char *buf) reads 4 characters at a time from a file. The return value is ...

  9. Cocos2d-x 坑之一：Xcode文件真实目录与工程视图目录

    Cocos2d-x一定要保证 Xcode文件真实目录与工程视图目录 的一致性,不然,会出现文件读取不了,或include不了的情况. 如果出现此类情况,优先查看真实目录的结构.

  10. Android——显示当前运行所有服务，判断服务是否运行

    1.显示系统当前所有运行服务: ActivityManager am = (ActivityManager) MainActivity.this.getSystemService(Context.AC ...