jQuery合成事件toggle，折叠展开的面板

2024-09-05 12:18:18

字体：大中小

来源：转载

供稿：网友

jQuery合成事件toggle示例演示，点击后触发事件，并为特定Div加色，Toggle事件应用广泛，前端设计开发必备的常用技巧，本特效代码可作为其典型的参考实例分享给朋友们。

<!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>合成事件toggle</title><script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script><style>*{margin:0;padding:0;}	body { font-size: 13px; line-height: 130%; padding: 60px }#panel { width: 300px; border: 1px solid #0050D0 }.head { padding: 5px; background: #96E555; cursor: pointer }.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }</style><style type="text/css">.highlight{ background:#FF3300; }</style><script type="text/javascript">$(function(){    $("#panel h5.head").toggle(function(){			$(this).addClass("highlight");			$(this).next("div.content").show();	},function(){			$(this).removeClass("highlight");			$(this).next("div.content").hide();	});})</script></head><body><div id="panel">	<h5 class="head">什么是jQuery?</h5>	<div class="content">	源码爱好者提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。	</div></div></body></html>

上一篇：论坛Ajax打分效果代码

下一篇：jQuery返回顶部特效，滚动条拖至最底部