<!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>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
* {margin:0;padding:0;}
.accordion {width:500px;height:auto;border:solid 1px #ccc;}
.accordion dt {padding:10px;border-bottom:solid 1px #ccc;font:bold 14px/16px 微软雅黑;color:#444;background:#eee;}
.accordion dd {padding:8px 10px;font:12px/16px 微软雅黑;color:#999;border-bottom:solid 1px #ccc;}
</style>
</head>
<body>
<dl class="accordion" id="my">
<dt>方法合并 1</dt>
<dd>jQuery 的 $.extend 方法合并两个或多个对象</dd>
<dt>方法合并 2</dt>
<dd>jQuery 的 $.extend 方法合并两个或多个对象</dd>
<dt>方法合并 3</dt>
<dd>jQuery 的 $.extend 方法合并两个或多个对象</dd>
<dt>方法合并 4</dt>
<dd>jQuery 的 $.extend 方法合并两个或多个对象</dd>
</dl>
<script>
(function($){
$.fn.accordion = function(options){
return this.each(function(){
var dts = $(this).children('dt');
dts.click(onClick);
dts.each(reseter);
});
function onClick () {
$(this).siblings('dt').each(hide);
$(this).next().slideDown("fast");
return false;
}
function hide (){
$(this).next().slideUp("fast");
}
function reseter(){
$(this).next().hide();
}
};
})(jQuery);
$('#my').accordion();
</script>
</body>
</html>
- 方法合并 1
- jQuery 的 $.extend 方法合并两个或多个对象
- 方法合并 2
- jQuery 的 $.extend 方法合并两个或多个对象
- 方法合并 3
- jQuery 的 $.extend 方法合并两个或多个对象
- 方法合并 4
- jQuery 的 $.extend 方法合并两个或多个对象