jQuery常见问题列表展开收缩代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery常见问题列表展开收缩代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jQuery常见问题列表展开收缩代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="style/index.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/index.js"></script>
<script>
	(function (doc, win) {
		var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function () {
		var clientWidth = docEl.clientWidth;
		if (!clientWidth) return;
		docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
		};
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
</script>		
</head>
<body>
 <div data-role="page" class="page1">
	<div data-role="header">
		<h1>常见问题</h1>
	</div>
	<div data-role="content">
		<div data-role="collapsible-set" data-iconpos="none">
			<div data-role="collapsible">
				<h3>1.如何注销淘金行账户</h3>
				<p>您好，淘金行暂时不支持注销功能</p>
			</div>
			<div data-role="collapsible">
				<h3>2.如何修改我的个人信息</h3>
				<p>您好，淘金行暂时不支持注销功能</p>
			</div>
			<div data-role="collapsible">
				<h3>3.如何修改我的个人信息</h3>
				<p>您好，淘金行暂时不支持注销功能</p>
			</div>
			<div data-role="collapsible">
				<h3>4.如何修改我的个人信息</h3>
				<p>您好，淘金行暂时不支持注销功能</p>
			</div>	
			<div data-role="collapsible">
				<h3>5.密码忘记了怎么找回</h3>
				<p>您好，淘金行暂时不支持注销功能</p>
			</div>	
			<div data-role="collapsible">
				<h3>6.是否可以修改用户名</h3>
				<p>您好，淘金行暂时不支持注销功能</p>
			</div>			
		</div>
	</div>
  </div>

</body>
</html>

JS代码(index.js):

$(document).ready(function(){
	$(".page1 .page1_list li").click(function(){
	$(this).children('div').slideToggle().show();
}
)}
)

CSS代码(index.css):

form,div,table,span,p,b,a,i,input,font,dl,dt,dd,font,ul,li,ol,h1,h2,h3,h4,h5,h6,figure,button{margin:0;padding:0;list-style:none;list-style-type:none;font-size:0.28rem;}
html{height:100%;width:100%;font-family:'Heiti SC','Microsoft YaHei';font-size:100px;outline:0;-webkit-text-size-adjust:none;}
body{height:100%;margin:0;-webkit-user-select:none;position:relative;}
ul{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
.page1{background-color:#eee;}
.page1 .ui-bar-inherit{background-color:#fff;border:none;box-shadow:0 0.05rem 0.05rem #cecdcd;-moz-box-shadow:0 0.05rem 0.05rem #cecdcd;-webkit-box-shadow:0 0.05rem 0.05rem #cecdcd;-o-box-shadow:0 0.05rem 0.05rem #cecdcd;}
.page1 .ui-title{font-size:0.28rem;margin:0;}
.page1 .ui-btn{font-size:0.26rem;font-weight:bold;}
.page1{font-weight:normal;font-size:0.26rem;}
.page1 .ui-btn{background:#fff;}
.page1 .ui-btn:hover{background:#fff;}
.page1 h3 .ui-btn{overflow:visible;margin:0;display:block;white-space:normal;}
.page1 .ui-collapsible-set{height:9.7rem;background-color:#fff;}

附件:下载该文件资源,减少时间成本(增值服务)