FAQ可收缩jquery手风琴导航特效代码

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

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

以下是 FAQ可收缩jquery手风琴导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>FAQ可收缩jquery手风琴导航</title>
<link type="text/css" rel="stylesheet" href="style/common.css">
<link type="text/css" rel="stylesheet" href="style/helpCenter.css">
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/helpCenter.js" language="javascript"></script>
</head>
<body>
<!--container begin-->
<div id="container" class="w990 mlrauto clearfix">
	<!--menu begin-->
	<!--menu end-->
    <!--questions begin-->
<div id="questions">
		<ul id="questionList" class="foldList clearfix">
			<li class="clearfix">
				<h5>
					<b class="UI-ask"></b>
					什么是享赢棋牌联盟？
				</h5>
				<div class="foldContent">
					<p>
享赢棋牌联盟是杭州畅唐科技有限公司旗下品牌，以棋牌为核心，为站长提供新型的流量变现产品和服务。
					</p>
				</div>
			</li>
			<li class="clearfix">
				<h5>
					<b class="UI-ask"></b>
					如何通过享赢棋牌进行流量变现？
				</h5>
				<div class="foldContent">
					<p>
您可以在享赢棋牌联盟自助定制您自己的棋牌游戏平台，然后在您自己的网站进行推广，将网站用户转化为您的棋牌玩家。您的玩家游戏和充值都会给您产生盈利。
					</p>
				</div>
			</li>
			<li class="clearfix">
				<h5>
					<b class="UI-ask"></b>
					享赢棋牌联盟提供哪些服务？
				</h5>
				<div class="foldContent">
					<p>
享赢免费给客户提供整套的价值100万的棋牌游戏平台；免费提供公共客服系统、运维系统、充值系统等支持；免费提供游戏升级、游戏比赛活动等。
					</p>
				</div>
			</li>
			<li class="clearfix">
				<h5>
					<b class="UI-ask"></b>
					 合作享赢棋牌联盟需要交钱么？
				</h5>
				<div class="foldContent">
					<p>
合作享赢棋牌不需要任何费用，享赢提供的棋牌游戏产品和服务都是免费的。
					</p>
				</div>
			</li>
			<li class="clearfix">
				<h5>
					<b class="UI-ask"></b>
					 在享赢定制的棋牌游戏平台包括哪些？
				</h5>
				<div class="foldContent">
					<p>
在享赢定制的棋牌游戏平台包括一个棋牌游戏网站和一个棋牌游戏大厅。
					</p>
				</div>
			</li>
			<li class="clearfix">
				<h5>
					<b class="UI-ask"></b>
					 没有网络游戏运营资质也可以合作享赢么？
				</h5>
				<div class="foldContent">
					<p>
合法的网络游戏运营公司需要注册资金1000万以上，才能申请《网络文化经营许可证》；享赢棋牌联盟免费与您共享游戏运营资质，您可以放心合作。
					</p>
				</div>
			</li>
			<li class="clearfix">
				<h5>
					<b class="UI-ask"></b>
					 在享赢定制的棋牌平台有初始玩家么？
				</h5>
				<div class="foldContent">
					<p>
在享赢定制的棋牌平台，用户与同城游是互通的。同城游300万以上活跃玩家，为您完美解决新平台前期零用户、推广难的问题。
					</p>
				</div>
			</li>
			<li class="clearfix">
				<h5>
					<b class="UI-ask"></b>
					 享赢和同城游是什么关系？
				</h5>
				<div class="foldContent">
					<p>
享赢和同城游都是杭州畅唐科技有限公司旗下品牌：享赢服务广大行业客户（包括站长、平台、商家、电视台、运营商等）；同城游为棋牌游戏终端玩家提供运营、客服、运维等服务。
					</p>
				</div>
			</li>
		</ul>
  </div>
	<!--questions end-->
	<div class="cb"></div>
</div>
</body>
</html>

JS代码(dd_belatedpng_0.0.8a-min.js):

var DD_belatedPNG={
	ns:"DD_belatedPNG",imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function(){
	if(document.namespaces&&!document.namespaces[this.ns]){
	document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}
}
,createVmlStyleSheet:function(){
	var b,a;
	b=document.createElement("style");
	b.setAttribute("media","screen");
	document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
	if(b.styleSheet){
	b=b.styleSheet;
	b.addRule(this.ns+"\\:*","{
	behavior:url(#default#VML)}
");
	b.addRule(this.ns+"\\:shape","position:absolute;
	");
	b.addRule("img."+this.ns+"_sizeFinder","behavior:none;
	border:none;
	position:absolute;
	z-index:-1;
	top:-10000px;
	visibility:hidden;
	");
	this.screenStyleSheet=b;
	a=document.createElement("style");
	a.setAttribute("media","print");
	document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
	a=a.styleSheet;
	a.addRule(this.ns+"\\:*","{
	display:none !important;
}
");
	a.addRule("img."+this.ns+"_sizeFinder","{
	display:none !important;
}
")}
}
,readPropertyChange:function(){
	var b,c,a;
	b=event.srcElement;
	if(!b.vmlInitiated){
	return}
if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){
	DD_belatedPNG.applyVML(b)}
if(event.propertyName=="style.display"){
	c=(b.currentStyle.display=="none")?"none":"block";
	for(a in b.vml){
	if(b.vml.hasOwnProperty(a)){
	b.vml[a].shape.style.display=c}
}
}
if(event.propertyName.search("filter")!=-1){
	DD_belatedPNG.vmlOpacity(b)}
}
,vmlOpacity:function(b){
	if(b.currentStyle.filter.search("lpha")!=-1){
	var a=b.currentStyle.filter;
	a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
	b.vml.color.shape.style.filter=b.currentStyle.filter;
	b.vml.image.fill.opacity=a}
}
,handlePseudoHover:function(a){
	setTimeout(function(){
	DD_belatedPNG.applyVML(a)}
,1)}
,fix:function(a){
	if(this.screenStyleSheet){
	var c,b;
	c=a.split(",");
	for(b=0;
	b<c.length;
	b++){
	this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}
}
}
,applyVML:function(a){
	a.runtimeStyle.cssText="";
	this.vmlFill(a);
	this.vmlOffsets(a);
	this.vmlOpacity(a);
	if(a.isImg){
	this.copyImageBorders(a)}
}
,attachHandlers:function(i){
	var d,c,g,e,b,f;
	d=this;
	c={
	resize:"vmlOffsets",move:"vmlOffsets"}
;
	if(i.nodeName=="A"){
	e={
	mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"}
;
	for(b in e){
	if(e.hasOwnProperty(b)){
	c[b]=e[b]}
}
}
for(f in c){
	if(c.hasOwnProperty(f)){
	g=function(){
	d[c[f]](i)}
;
	i.attachEvent("on"+f,g)}
}
i.attachEvent("onpropertychange",this.readPropertyChange)}
,giveLayout:function(a){
	a.style.zoom=1;
	if(a.currentStyle.position=="static"){
	a.style.position="relative"}
}
,copyImageBorders:function(b){
	var c,a;
	c={
	borderStyle:true,borderWidth:true,borderColor:true}
;
	for(a in c){
	if(c.hasOwnProperty(a)){
	b.vml.color.shape.style[a]=b.currentStyle[a]}
}
}
,vmlFill:function(e){
	if(!e.currentStyle){
	return}
else{
	var d,f,g,b,a,c;
	d=e.currentStyle}
for(b in e.vml){
	if(e.vml.hasOwnProperty(b)){
	e.vml[b].shape.style.zIndex=d.zIndex}
}
e.runtimeStyle.backgroundColor="";
	e.runtimeStyle.backgroundImage="";
	f=true;
	if(d.backgroundImage!="none"||e.isImg){
	if(!e.isImg){
	e.vmlBg=d.backgroundImage;
	e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}
else{
	e.vmlBg=e.src}
g=this;
	if(!g.imgSize[e.vmlBg]){
	a=document.createElement("img");
	g.imgSize[e.vmlBg]=a;
	a.className=g.ns+"_sizeFinder";
	a.runtimeStyle.cssText="behavior:none;
	position:absolute;
	left:-10000px;
	top:-10000px;
	border:none;
	margin:0;
	padding:0;
	";
	c=function(){
	this.width=this.offsetWidth;
	this.height=this.offsetHeight;
	g.vmlOffsets(e)}
;
	a.attachEvent("onload",c);
	a.src=e.vmlBg;
	a.removeAttribute("width");
	a.removeAttribute("height");
	document.body.insertBefore(a,document.body.firstChild)}
e.vml.image.fill.src=e.vmlBg;
	f=false}
e.vml.image.fill.on=!f;
	e.vml.image.fill.color="none";
	e.vml.color.shape.style.backgroundColor=d.backgroundColor;
	e.runtimeStyle.backgroundImage="none";
	e.runtimeStyle.backgroundColor="transparent"}
,vmlOffsets:function(d){
	var h,n,a,e,g,m,f,l,j,i,k;
	h=d.currentStyle;
	n={
	W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop}
;
	a=(n.L+n.bLW==1)?1:0;
	e=function(b,p,q,c,s,u){
	b.coordsize=c+","+s;
	b.coordorigin=u+","+u;
	b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";
	b.style.width=c+"px";
	b.style.height=s+"px";
	b.style.left=p+"px";
	b.style.top=q+"px"}
;
	e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);
	e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);
	g={
	X:0,Y:0}
;
	if(d.isImg){
	g.X=parseInt(h.paddingLeft,10)+1;
	g.Y=parseInt(h.paddingTop,10)+1}
else{
	for(j in g){
	if(g.hasOwnProperty(j)){
	this.figurePercentage(g,n,j,h["backgroundPosition"+j])}
}
}
d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);
	m=h.backgroundRepeat;
	f={
	T:1,R:n.W+a,B:n.H,L:1+a}
;
	l={
	X:{
	b1:"L",b2:"R",d:"W"}
,Y:{
	b1:"T",b2:"B",d:"H"}
}
;
	if(m!="repeat"||d.isImg){
	i={
	T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)}
;
	if(m.search("repeat-")!=-1){
	k=m.split("repeat-")[1].toUpperCase();
	i[l[k].b1]=1;
	i[l[k].b2]=n[l[k].d]}
if(i.B>n.H){
	i.B=n.H}
d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}
else{
	d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}
}
,figurePercentage:function(d,c,f,a){
	var b,e;
	e=true;
	b=(f=="X");
	switch(a){
	case"left":case"top":d[f]=0;
	break;
	case"center":d[f]=0.5;
	break;
	case"right":case"bottom":d[f]=1;
	break;
	default:if(a.search("%")!=-1){
	d[f]=parseInt(a,10)/100}
else{
	e=false}
}
d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
	if(d[f]%2===0){
	d[f]++}
return d[f]}
,fixPng:function(c){
	c.style.behavior="none";
	var g,b,f,a,d;
	if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
	return}
c.isImg=false;
	if(c.nodeName=="IMG"){
	if(c.src.toLowerCase().search(/\.png$/)!=-1){
	c.isImg=true;
	c.style.visibility="hidden"}
else{
	return}
}
else{
	if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
	return}
}
g=DD_belatedPNG;
	c.vml={
	color:{
}
,image:{
}
}
;
	b={
	shape:{
}
,fill:{
}
}
;
	for(a in c.vml){
	if(c.vml.hasOwnProperty(a)){
	for(d in b){
	if(b.hasOwnProperty(d)){
	f=g.ns+":"+d;
	c.vml[a][d]=document.createElement(f)}
}
c.vml[a].shape.stroked=false;
	c.vml[a].shape.appendChild(c.vml[a].fill);
	c.parentNode.insertBefore(c.vml[a].shape,c)}
}
c.vml.image.shape.fillcolor="none";
	c.vml.image.fill.type="tile";
	c.vml.color.fill.on=false;
	g.attachHandlers(c);
	g.giveLayout(c);
	g.giveLayout(c.offsetParent);
	c.vmlInitiated=true;
	g.applyVML(c)}
}
;
	try{
	document.execCommand("BackgroundImageCache",false,true)}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
	DD_belatedPNG.createVmlStyleSheet();

JS代码(helpcenter.js):

$(function(){
	/*public*/
 (function(){
	var windowHeight=$(window).height();
	var containerHeight=$("#container").height();
	if(windowHeight-containerHeight>380){
	$("#container").css("min-height",windowHeight-380);
}
}
)();
	$("li>h5",".foldList").bind("click",function(){
	var li=$(this).parent();
	if(li.hasClass("fold")){
	li.removeClass("fold");
	$(this).find("b").removeClass("UI-bubble").addClass("UI-ask");
	li.find(".foldContent").slideDown();
}
else{
	li.addClass("fold");
	$(this).find("b").removeClass("UI-ask").addClass("UI-bubble");
	li.find(".foldContent").slideUp();
}
}
)}
)

CSS代码(helpcenter.css):

strong{font-weight:bold;}
/*yaheiText*/
.yaheiText15{display:block;width:70px;height:16px;overflow:hidden;background:url(../images/sIcons.png) 0 -282px no-repeat;}
.yaheiText54{display:block;width:98px;height:17px;overflow:hidden;background:url(../images/sIcons.png) -0px -576px no-repeat;}
/*foldList*/
.foldList li{border-bottom:1px solid #e7e7e7;padding:0 14px;_width:742px;_overflow:hidden;}
.foldList li.last{border:none;}
.foldList li h5{height:40px;position:relative;color:#666;font-size:14px;cursor:pointer;line-height:40px;text-indent:26px;}
.foldContent{border-left:3px solid #018ccb;padding:10px 26px;border-top:1px dashed #e2e2e2;line-height:2em;background:#f3f3f3;color:#888;margin-bottom:5px;}
/*formList*/
.formList label{display:inline-block;width:75px;height:27px;overflow:hidden;line-height:27px;font-size:14px;margin-right:40px;*margin-right:37px;float:left;text-align:right;}
.formList label b{color:#ff0000;float:left;font:normal 12px/27px "宋体";}
.formList input{width:425px;height:27px;line-height:27px;}
.formList li{height:63px;width:550px;}
.formList li .alert{margin:10px 10px 0 0;float:right;}
.formList li textarea{width:405px;height:110px;_float:left;border:none;resize:none;font-size:12px;padding:10px;}
.formList li select{border:1px solid #ccc;position:relative;top:4px;}
#container{margin-top:32px;}
#menu{width:188px;float:left;}
#menu dl{border:1px solid #e5e5e5;padding-bottom:17px;margin-bottom:20px;}
#menu dl dt{padding:0 20px;border-bottom:1px solid #e5e5e5;color:#666;height:28px;font:bold 14px/28px "宋体";margin-bottom:17px;background:#f9f9f9}
#menu dl dd{width:164px;padding:0 12px;height:29px;font:normal 12px/29px "宋体";margin-bottom:7px;}
#menu dl dd a{display:block;color:#757575;text-indent:8px;}
#menu dl dd a:hover{color:#018ccb}
#menu dl dd a.current{background:url(../images/buttons.png) 0 -244px no-repeat;font-weight:bold;color:#018ccb}
#joinUsDD{position:relative}
#joinUsDD a{color:#ff9900!important;}
#joinUsDD .UI-orangeArrow{position:absolute;right:105px;top:9px;}
#questions{margin-left:28px;width:772px;float:left;}
#questions h2{position:relative;height:30px;background:#f3f3f3;color:#555;line-height:30px;text-indent:35px;}
#questions h2 .UI-home{position:absolute;left:14px;top:7px;}
#questionList{border:1px solid #e7e7e7;padding-top:14px;margin-top:20px;}
#questionList a{color:#FFA012}
#questionList a:hover{text-decoration:underline;}
#questionList li h5 .UI-ask,#questionList li h5 .UI-bubble{position:absolute;left:0px;top:9px;}
#feedback .borderTabHead .borderTab{width:70px;left:56px;}
#feedbackContent{margin:0 auto;width:540px;margin-top:40px;}
#feedbackContent .buttonGroup{text-align:center;margin:37px 0 0 110px;}
#cooperation{width:700px;background:#fff;padding:10px 10px 20px 0px;margin:20px 20px 0px 0px;position:relative;_top:20px;zoom:1;}
#cooperation h2{height:40px;line-height:40px;margin-bottom:28px;border-bottom:1px solid #ccc;}
#cooperation h2 .title{font-size:16px;}
#cooperation .formList{margin-left:30px;}
#cooperation a{color:#008ccb;}
#cooperation a:hover{text-decoration:underline;}
#cooperation .closeBtn{position:absolute;right:-20px;top:-20px;}
#cooperation .borderTabHead{padding-left:170px;}
#cooperation .borderTabHead .borderTab{width:98px;left:56px;}
#cooperationContent{margin:0 auto;width:600px;}
#cooperationContent .buttonGroup{text-align:center;margin:37px 0 0px 110px;}
#checkSite{background:#f1f8fd;border:1px dashed #bcdffa;position:relative;width:400px;margin:10px 0 0px 115px;padding:10px 10px 0 10px;}
#checkSite p{line-height:2.5em;height:2.5em;}
#checkSite a{color:#ff6600;}
#checkSite .UI-orangeClose{position:absolute;top:5px;right:8px;}
#checkSite .UI-download{margin-left:6px;vertical-align:middle;}
#step2{margin:20px auto 35px;width:671px}
#step2 p{margin-top:15px;}

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