我们继续讲解jquery操作事件中，js手机版定义折叠块，点击按钮图片显示，点击按钮图片隐藏的效果和定义多个嵌套折叠块，类似于多个栏目效果，点击显示子栏目，点击子栏目在显示子栏目的下一级
1.定义折叠块
<!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/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
#page img { width: 100%; }
</style>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>生活化折叠展板</h1>
</div>
<div data-role="collapsible">
<h1>居家每日精选</h1>
<p><img src="//freemuban.com/js/511/111.png" alt=""/></p>
</div>
</div>
</body>
</html>
2.定义嵌套折叠块
<!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/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>折叠嵌套</h1>
</div>
<div data-role="collapsible">
<h1>一级折叠面板</h1>
<p>家用电器</p>
<div data-role="collapsible">
<h2>二级折叠面板</h2>
<p>大家电</p>
<div data-role="collapsible">
<h3>三级折叠面板</h3>
<p>平板电视/空调/冰箱/洗衣机/家庭影院/DVD/迷你音响/烟机/灶具/热水器/消毒柜/洗碗机/酒柜/冷柜/家电配件</p>
</div>
</div>
</div>
</div>
</body>
</html>
