jquery点击标题显示简介特效代码

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

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

以下是 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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery点击标题显示简介</title>
    <link href="style/a7.css" type="text/css" rel="stylesheet">	
	<script language="javascript">
	i=40;
	function scroll(a){
	if(i){a1.scrollLeft+=5*a;i--;setTimeout("scroll("+a+")",10);}else i=40;
	}
	</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#navigation').accordion({
		autoheight: false,
		active: false,//false为都折叠，要某个不折叠，只要设置index即可
		header: '.head',//可以折叠的元素
		navigation: true,
		event: 'click',//折叠展开时的事件
		fillSpace: false,
		animated: 'bounceslide'//bounceslide,easeslide展开折叠时的动态效果，需要引入其他js文件（UI Effects Core）
	});
});
</script>


</head>
<body>
	<div id="container">
		<div class="pbd">
			<div class="area01">
				<div class="maincontent">
					<h4>内容</h4>
					<div class="box01">
						<img src="images/g1-img01.gif" />
					</div>
					<div class="box02">
						<h4>内容</h4>
						
					</div>
					<div class="box03">
						  <ul id="navigation">
							<li><span class="head">内容--</span>
							  <p>内容--</p>
							</li>
							<li><span class="head">内容--</span>
							  <p>内容--</p>
							</li>
							<li><span class="head">内容--</span>
							  <p>内容--</p>
							</li>
							<li><span class="head">内容--</span>
							  <p>内容--</p>
							</li>
							
						  </ul>
						</div>
					
				</div>
				
			</div>
		</div>
	</div>
</body>
</html>

JS代码(chili-1.7.pack.js):

eval(function(p,a,c,k,e,d){
	e=function(c){
	return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--)d[e(c)]=k[c]||e(c);
	k=[function(e){
	return d[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1;
}
;
	while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
	return p;
}
('8={
	3b:"1.6",2o:"1B.1Y,1B.23,1B.2e",2i:"",2H:1a,12:"",2C:1a,Z:"",2a:\'<H V="$0">$$</H>\',R:"&#F;
	",1j:"&#F;
	&#F;
	&#F;
	&#F;
	",1f:"&#F;
	<1W/>",3c:5(){
	9 $(y).39("1k")[0]}
,I:{
}
,N:{
}
}
;
	(5($){
	$(5(){
	5 1J(l,a){
	5 2I(A,h){
	4 3=(1v h.3=="1h")?h.3:h.3.1w;
	k.1m({
	A:A,3:"("+3+")",u:1+(3.c(/\\\\./g,"%").c(/\\[.*?\\]/g,"%").3a(/\\((?!\\?)/g)||[]).u,z:(h.z)?h.z:8.2a}
)}
5 2z(){
	4 1E=0;
	4 1x=x 2A;
	Q(4 i=0;
	i<k.u;
	i++){
	4 3=k[i].3;
	3=3.c(/\\\\\\\\|\\\\(\\d+)/g,5(m,1F){
	9!1F?m:"\\\\"+(1E+1+1t(1F))}
);
	1x.1m(3);
	1E+=k[i].u}
4 1w=1x.3d("|");
	9 x 1u(1w,(a.3g)?"2j":"g")}
5 1S(o){
	9 o.c(/&/g,"&3h;
	").c(/</g,"&3e;
	")}
5 1R(o){
	9 o.c(/ +/g,5(1X){
	9 1X.c(/ /g,R)}
)}
5 G(o){
	o=1S(o);
	7(R){
	o=1R(o)}
9 o}
5 2m(2E){
	4 i=0;
	4 j=1;
	4 h;
	19(h=k[i++]){
	4 1b=D;
	7(1b[j]){
	4 1U=/(\\\\\\$)|(?:\\$\\$)|(?:\\$(\\d+))/g;
	4 z=h.z.c(1U,5(m,1V,K){
	4 3f=\'\';
	7(1V){
	9"$"}
v 7(!K){
	9 G(1b[j])}
v 7(K=="0"){
	9 h.A}
v{
	9 G(1b[j+1t(K,10)])}
}
);
	4 1A=D[D.u-2];
	4 2h=D[D.u-1];
	4 2G=2h.2v(11,1A);
	11=1A+2E.u;
	14+=G(2G)+z;
	9 z}
v{
	j+=h.u}
}
}
4 R=8.R;
	4 k=x 2A;
	Q(4 A 2r a.k){
	2I(A,a.k[A])}
4 14="";
	4 11=0;
	l.c(2z(),2m);
	4 2y=l.2v(11,l.u);
	14+=G(2y);
	9 14}
5 2B(X){
	7(!8.N[X]){
	4 Y=\'<Y 32="1p" 33="p/2u"\'+\' 30="\'+X+\'">\';
	8.N[X]=1H;
	7($.31.34){
	4 W=J.1L(Y);
	4 $W=$(W);
	$("2d").1O($W)}
v{
	$("2d").1O(Y)}
}
}
5 1q(e,a){
	4 l=e&&e.1g&&e.1g[0]&&e.1g[0].37;
	7(!l)l="";
	l=l.c(/\\r\\n?/g,"\\n");
	4 C=1J(l,a);
	7(8.1j){
	C=C.c(/\\t/g,8.1j)}
7(8.1f){
	C=C.c(/\\n/g,8.1f)}
$(e).38(C)}
5 1o(q,13){
	4 1l={
	12:8.12,2x:q+".1d",Z:8.Z,2w:q+".2u"}
;
	4 B;
	7(13&&1v 13=="2l")B=$.35(1l,13);
	v B=1l;
	9{
	a:B.12+B.2x,1p:B.Z+B.2w}
}
7($.2q)$.2q({
	36:"2l.15"}
);
	4 2n=x 1u("\\\\b"+8.2i+"\\\\b","2j");
	4 1e=[];
	$(8.2o).2D(5(){
	4 e=y;
	4 1n=$(e).3i("V");
	7(!1n){
	9}
4 q=$.3u(1n.c(2n,""));
	7(\'\'!=q){
	1e.1m(e);
	4 f=1o(q,e.15);
	7(8.2H||e.15){
	7(!8.N[f.a]){
	1D{
	8.N[f.a]=1H;
	$.3v(f.a,5(M){
	M.f=f.a;
	8.I[f.a]=M;
	7(8.2C){
	2B(f.1p)}
$("."+q).2D(5(){
	4 f=1o(q,y.15);
	7(M.f==f.a){
	1q(y,M)}
}
)}
)}
1I(3s){
	3t("a 3w Q:"+q+\'@\'+3z)}
}
}
v{
	4 a=8.I[f.a];
	7(a){
	1q(e,a)}
}
}
}
);
	7(J.1i&&J.1i.29){
	5 22(p){
	7(\'\'==p){
	9""}
1z{
	4 16=(x 3A()).2k()}
19(p.3x(16)>-1);
	p=p.c(/\\<1W[^>]*?\\>/3y,16);
	4 e=J.1L(\'<1k>\');
	e.3l=p;
	p=e.3m.c(x 1u(16,"g"),\'\\r\\n\');
	9 p}
4 T="";
	4 18=1G;
	$(1e).3j().G("1k").U("2c",5(){
	18=y}
).U("1M",5(){
	7(18==y)T=J.1i.29().3k}
);
	$("3n").U("3q",5(){
	7(\'\'!=T){
	2p.3r.3o(\'3p\',22(T));
	2V.2R=1a}
}
).U("2c",5(){
	T=""}
).U("1M",5(){
	18=1G}
)}
}
)}
)(1Z);
	8.I["1Y.1d"]={
	k:{
	2M:{
	3:/\\/\\*[^*]*\\*+(?:[^\\/][^*]*\\*+)*\\//}
,25:{
	3:/\\<!--(?:.|\\n)*?--\\>/}
,2f:{
	3:/\\/\\/.*/
}
,2P:{
	3:/2L|2T|2J|2O|2N|2X|2K|2Z|2U|2S|2W|2Y|2Q|51|c-50/}
,53:{
	3:/\\/[^\\/\\\\\\n]*(?:\\\\.[^\\/\\\\\\n]*)*\\/[52]*/
}
,1h:{
	3:/(?:\\\'[^\\\'\\\\\\n]*(?:\\\\.[^\\\'\\\\\\n]*)*\\\')|(?:\\"[^\\"\\\\\\n]*(?:\\\\.[^\\"\\\\\\n]*)*\\")/}
,27:{
	3:/\\b[+-]?(?:\\d*\\.?\\d+|\\d+\\.?\\d*)(?:[1r][+-]?\\d+)?\\b/}
,4X:{
	3:/\\b(D|1N|1K|1I|2t|2s|4W|1z|v|1a|Q|5|7|2r|4Z|x|1G|9|1Q|y|1H|1D|1v|4|4Y|19|59)\\b/}
,1y:{
	3:/\\b(58|2k|2p|5b|5a|55|J|54|57|1t|56|4L|4K|4N|4M|4H|4G|4J)\\b/}
,1C:{
	3:/(?:\\<\\w+)|(?:\\>)|(?:\\<\\/\\w+\\>)|(?:\\/\\>)/}
,26:{
	3:/\\s+\\w+(?=\\s*=)/}
,20:{
	3:/([\\"\\\'])(?:(?:[^\\1\\\\\\r\\n]*?(?:\\1\\1|\\\\.))*[^\\1\\\\\\r\\n]*?)\\1/}
,21:{
	3:/&[\\w#]+?;
	/}
,4I:{
	3:/(\\$|1Z)/}
}
}
;
	8.I["23.1d"]={
	k:{
	25:{
	3:/\\<!--(?:.|\\n)*?--\\>/}
,1h:{
	3:/(?:\\\'[^\\\'\\\\\\n]*(?:\\\\.[^\\\'\\\\\\n]*)*\\\')|(?:\\"[^\\"\\\\\\n]*(?:\\\\.[^\\"\\\\\\n]*)*\\")/}
,27:{
	3:/\\b[+-]?(?:\\d*\\.?\\d+|\\d+\\.?\\d*)(?:[1r][+-]?\\d+)?\\b/}
,1C:{
	3:/(?:\\<\\w+)|(?:\\>)|(?:\\<\\/\\w+\\>)|(?:\\/\\>)/}
,26:{
	3:/\\s+\\w+(?=\\s*=)/}
,20:{
	3:/([\\"\\\'])(?:(?:[^\\1\\\\\\r\\n]*?(?:\\1\\1|\\\\.))*[^\\1\\\\\\r\\n]*?)\\1/}
,21:{
	3:/&[\\w#]+?;
	/}
}
}
;
	8.I["2e.1d"]={
	k:{
	4S:{
	3:/\\/\\*[^*]*\\*+([^\\/][^*]*\\*+)*\\//}
,2f:{
	3:/(?:\\/\\/.*)|(?:[^\\\\]\\#.*)/}
,4V:{
	3:/\\\'[^\\\'\\\\]*(?:\\\\.[^\\\'\\\\]*)*\\\'/}
,4U:{
	3:/\\"[^\\"\\\\]*(?:\\\\.[^\\"\\\\]*)*\\"/}
,4P:{
	3:/\\b(?:[4O][2b][1s][1s]|[4R][4Q][2b][1P]|[5c][5v][1s][5u][1P])\\b/}
,5x:{
	3:/\\b[+-]?(\\d*\\.?\\d+|\\d+\\.?\\d*)([1r][+-]?\\d+)?\\b/}
,5y:{
	3:/\\b(?:5z|5w(?:5A|5E(?:5F(?:17|1c)|5G(?:17|1c))|17|1T|5B|5C|5D(?:17|1T|1c)|1c)|P(?:5h(?:5k|5j)|5e(?:5d|5g(?:5f|5l)|5r|E(?:5t|5s)|5n(?:5m|5p)|L(?:3X|3W)|O(?:S|3Y(?:3T|3S|3V))|3U|S(?:44|47|46)|41))|40)\\b/}
,1y:{
	3:/(?:\\$43|\\$42|\\$3R|\\$3G|\\$3F|\\$3I|\\$3H|\\$3C|\\$3B|\\$3D)\\b/}
,28:{
	3:/\\b(?:3O|3N|3P|3K|3J|3M|3L|48|4v|1N|1K|1I|4u|V|4x|4w|2t|4r|2s|4q|1z|4t|v|4s|4D|4C|4F|4E|4z|4y|4B|4A|4p|4d|2F|2F|4g|Q|4f|5|1y|7|4a|4m|4l|4o|4i|4k|x|4j|4h|4n|4b|4c|49|4e|3Q|3E|9|45|1Q|y|3Z|1D|5o|5q|4|19|5i)\\b/}
,2g:{
	3:/\\$(\\w+)/,z:\'<H V="28">$</H><H V="2g">$1</H>\'}
,1C:{
	3:/(?:\\<\\?[24][4T][24])|(?:\\<\\?)|(?:\\?\\>)/}
}
}
',62,353,'|||exp|var|function||if|ChiliBook|return|recipe||replace||el|path||step|||steps|ingredients|||str|text|recipeName||||length|else||new|this|replacement|stepName|settings|dish|arguments||160|filter|span|recipes|document|||recipeLoaded|required|||for|replaceSpace||insidePRE|bind|class|domLink|stylesheetPath|link|stylesheetFolder||lastIndex|recipeFolder|options|perfect|chili|newline|ERROR|downPRE|while|false|aux|WARNING|js|codes|replaceNewLine|childNodes|string|selection|replaceTab|pre|settingsDef|push|elClass|getPath|stylesheet|makeDish|eE|Ll|parseInt|RegExp|typeof|source|exps|global|do|offset|code|tag|try|prevLength|aNum|null|true|catch|cook|case|createElement|mouseup|break|append|Ee|switch|replaceSpaces|escapeHTML|NOTICE|pattern|escaped|br|spaces|mix|jQuery|avalue|entity|preformatted|xml|Pp|htcom|aname|numbers|keyword|createRange|defaultReplacement|Uu|mousedown|head|php|com|variable|input|elementClass|gi|valueOf|object|chef|selectClass|elementPath|window|metaobjects|in|default|continue|css|substring|stylesheetFile|recipeFile|lastUnmatched|knowHow|Array|checkCSS|stylesheetLoading|each|matched|extends|unmatched|recipeLoading|prepareStep|unblockUI|ajaxSubmit|silverlight|jscom|unblock|block|plugin|clearFields|returnValue|fieldValue|blockUI|formSerialize|event|resetForm|ajaxForm|clearForm|fieldSerialize|href|browser|rel|type|msie|extend|selector|data|html|next|match|version|getPRE|join|lt|bit|ignoreCase|amp|attr|parents|htmlText|innerHTML|innerText|body|setData|Text|copy|clipboardData|recipeNotAvailable|alert|trim|getJSON|unavailable|indexOf|ig|recipePath|Date|_SESSION|_SERVER|php_errormsg|require_once|_GET|_FILES|_REQUEST|_POST|__METHOD__|__LINE__|and|abstract|__FILE__|__CLASS__|__FUNCTION__|require|_ENV|END|CONT|PREFIX|START|OCALSTATEDIR|IBDIR|UTPUT_HANDLER_|throw|__COMPILER_HALT_OFFSET__|VERSION|_COOKIE|GLOBALS|API|static|YSCONFDIR|HLIB_SUFFIX|array|protected|implements|print|private|exit|public|foreach|final|or|isset|old_function|list|include_once|include|php_user_filter|interface|exception|die|declare|elseif|echo|cfunction|as|const|clone|endswitch|endif|eval|endwhile|enddeclare|empty|endforeach|endfor|isNaN|NaN|jquery|Infinity|clearTimeout|setTimeout|clearInterval|setInterval|Nn|value|Rr|Tt|mlcom|Hh|string2|string1|delete|keywords|void|instanceof|content|taconite|gim|regexp|escape|constructor|parseFloat|unescape|toString|with|prototype|element|Ff|BINDIR|HP_|PATH|CONFIG_FILE_|EAR_|xor|INSTALL_DIR|EXTENSION_DIR|SCAN_DIR|MAX|INT_|unset|SIZE|use|DATADIR|XTENSION_DIR|OL|Ss|Aa|E_|number|const1|DEFAULT_INCLUDE_PATH|ALL|PARSE|STRICT|USER_|CO|MPILE_|RE_'.split('|'),0,{
}
))

CSS代码(a7.css):

@charset "utf-8";/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:0 auto;background:#f5f5ef;}
table{border-collapse:collapse;border-spacing:0;}
.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}
#container{width:945px;text-align:left;margin:0 auto;}
a{color:#333;text-decoration:none;}
a:hover{color:#ef9b11;text-decoration:underline;}
.maincontent{padding:12px 17px 30px 21px;width:720px;margin:20px auto;overflow:hidden;border:1px solid #d7d7d7;background:#fff;}
.maincontent h4{padding-left:21px;background:url(../images/icon01.gif) no-repeat 1px 6px;padding-top:11px;font-size:14px;padding-bottom:4px;}
.maincontent .box01{width:100%;}
.maincontent .box02{width:100%;background:url(../images/b1-bg01.gif) repeat-x left bottom;padding-bottom:7px;float:left;margin-bottom:5px;}
.maincontent .box02 h4{padding-left:45px;background:url(../images/b1-icon01.gif) no-repeat 1px 2px;padding-top:11px;font-size:14px;padding-bottom:4px;}
.maincontent .box02 h4 span{padding-left:4px;color:#ef0000;}
.maincontent .box03{width:100%;float:left;}
.maincontent .box03 ul li{background:url(../images/g1-bg01.gif) repeat-x left bottom;padding:10px 5px 10px 0;}
.maincontent .box03 ul li p{padding-left:41px;line-height:24px;}
span.head{display:block;padding-left:41px;background:url(../images/g1-icon01.gif) no-repeat 15px 5px;padding-top:6px;cursor:pointer;padding-bottom:5px;}
.maincontent .box03 ul li.selected{background:#f6f6f6;}
.maincontent .box03 ul li.selected p{color:#888;}
span.selected{background:url(../images/g1-icon02.gif) no-repeat 15px 5px;color:#888;}

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