学了一个封装的jquery插件，感觉还成

时间：2023-05-02 20:07:56
<!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 方法合并两个或多个对象

相关文章