我们讲解下在手机端类似qq聊天功能，点击展开好友列表，在点击关闭好友列表。我们看看代码怎么实现
我们看看页面效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/517/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/517/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/517/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/517/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
.ui-grid-a .ui-block-a { width: 25%; }
.ui-grid-a .ui-block-b { width: 75%; }
.ui-bar { height: 96px; }
.ui-block-b .ui-bar-c h1 {
font-size: 14px;
line-height: 22px;
}
.ui-block-b .ui-bar-c p { line-height: 20px; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>同事</h3>
<p>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b1.jpg" width="100%" /> </div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>张三</h1>
<p>点燃艺术火花的，与其说是灵感，不如说是邪念。</p>
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b2.jpg" width="100%" /> </div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>李四</h1>
<p>世界上根本没有专属这回事---那只是你为你想得到的东西付出的代价。</p>
</div>
</div>
</fieldset>
</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>好友</h3>
<p>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b3.jpg" width="100%" /> </div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>王五</h1>
<p>世界上唯一会随着时光的流逝而越变越美好的东西就是回忆。</p>
</div>
</div>
</fieldset>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/517/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/517/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/517/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/517/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
.ui-grid-a .ui-block-a { width: 25%; }
.ui-grid-a .ui-block-b { width: 75%; }
.ui-bar { height: 96px; }
.ui-block-b .ui-bar-c h1 {
font-size: 14px;
line-height: 22px;
}
.ui-block-b .ui-bar-c p { line-height: 20px; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>同事</h3>
<p>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b1.jpg" width="100%" /> </div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>张三</h1>
<p>点燃艺术火花的，与其说是灵感，不如说是邪念。</p>
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b2.jpg" width="100%" /> </div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>李四</h1>
<p>世界上根本没有专属这回事---那只是你为你想得到的东西付出的代价。</p>
</div>
</div>
</fieldset>
</p>
</div>
<div data-role="collapsible" data-collapsed="true" data-iconpos="right">
<h3>好友</h3>
<p>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b3.jpg" width="100%" /> </div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>王五</h1>
<p>世界上唯一会随着时光的流逝而越变越美好的东西就是回忆。</p>
</div>
</div>
</fieldset>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
