zoukankan      html  css  js  c++  java
  • 学了一个封装的jquery插件,感觉还成

    <!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 方法合并两个或多个对象
  • 相关阅读:
    面试再问HashMap,求你把这篇文章发给他!
    Maven Nexus私库搭建及使用,你还不会吗?
    两年摸爬滚打 Spring Boot,总结了这 16 条最佳实践
    @Controller,@Service,@Repository,@Component你搞懂了吗?
    mysql 输出当前月所有日期与对应的星期
    mysql创建每月执行一次的event
    一个关于explain出来为all的说明及优化
    怎么快速了解自己的MySQL服务器
    Mysql查找所有项目开始时间比之前项目结束时间小的项目ID
    Device eth0 does not seem to be present,delaying initialization解决方法
  • 原文地址:https://www.cnblogs.com/Sinhtml/p/3864924.html
Copyright © 2011-2022 走看看