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

    Cocoa Touch包括: (1)Core Animation: 通过Core Animation,可以通过一个基于独立图层的简单的编程模型来创建丰富的用户体验. (2)Core Audio: Co ...

  2. QT窗口渐现效果，窗口震动效果，鼠标移动窗口

    //窗口渐现效果void MainWindow::closeWindowAnimation() //关闭窗口效果 { QPropertyAnimation *animation = new QProp ...

  3. SQLMAP系列教程

    1.SQLMAP安装及access注入: http://www.stronkin.com/en/CompHonorBig.asp?id=7   2.Mysql数据库注入 http://www.slib ...

  4. 【2011 Greater New York Regional 】Problem B The Rascal Triangle

    一个简单的规律题,每一列都是一个等差数列: 代码: #include<cstdio> #define ll long long using namespace std; int main( ...

  5. 从 IT 中断中学到的最佳监控实践

    每个运维监控工具,一般要追踪数十万个内部性能指标.学会对哪些事件进行告警以及监控确实需要花费想当长的一段时间.因为,并非所有的指标等级都是一致.因此我们需要摸索出一套简单的方法,便于管理所有指标,而且 ...

  6. Eclipse报错：java.lang.ClassNotFoundException: ContextLoaderListener(Maven工程)

    Eclipse中tomcat部署工程启动后报错: 严重: Error configuring application listener of class org.springframework.web ...

  7. iOS开发UI篇—UITableviewcell的性能问题

    iOS开发UI篇—UITableviewcell的性能问题 一.UITableviewcell的一些介绍 UITableView的每一行都是一个UITableViewCell,通过dataSource ...

  8. JAVA 数组常用技巧

    1.  在Java中输出一个数组(Print an array in Java) int[] intArray = { 1, 2, 3, 4, 5 }; String intArrayString = ...

  9. selenium webdriver(6)---cookie相关操作

    介绍selenium操作cookie之前,先简单介绍一下cookie的基础知识 cookie cookie一般用来识别用户身份和记录用户状态,存储在客户端电脑上.IE的cookie文件路径(win7) ...

  10. Kia's Calculation（HDU 4267）

    Problem Description Doctor Ghee is teaching Kia how to calculate the sum of two integers. But Kia is ...