jquery自定义插件

最新推荐文章于 2024-03-19 19:45:10 发布

前端--小蔡

最新推荐文章于 2024-03-19 19:45:10 发布

阅读量334

点赞数 1

分类专栏： web前端文章标签： jquery 插件函数

本文链接：https://blog.csdn.net/qq_16577739/article/details/50087979

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

自定义插件

#javascript
$(function(){
    //调用你的自定义插件
$.fn.accordion = function(options) {
    return this.each(function() {
      var dts = $(this).children('dt');
      dts.click(onClick);
      dts.each(reset);
    });

    function onClick() {
      $(this).siblings('dt').each(hide);
      $(this).next().slideDown('fast');
      return false;
    }

    function hide() {
      $(this).next().slideUp('fast');
    }

    function reset() {
      $(this).next().hide();
    }
  }
});

    $(function(){
        $('dl#my-accordion').accordion();
    })

#css
.accordion {
    width: 500px;
    border: 1px solid #ccc;
    border-bottom: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.accordion dt,.accordion dd {
    border-bottom: 1px solid #ccc;
    margin: 0px;
}
.accordion dt {
    background: #eaeaea;
    cursor: pointer;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: bold;
}
.accordion dd {
    padding: 12px 8px;
}

#html
<!DOCTYPE HTML>
<html>
<head>
    <title>自定义你的插件</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <dl class="accordion" id="my-accordion">
      <dt>Section 1</dt>
        <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
      <dt>Section 2</dt>
        <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
      <dt>Section 3</dt>
        <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
      <dt>Section 4</dt>
        <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
    </dl>
</body>
</html>

前端--小蔡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery自定义插件

自定义插件#javascript$(function(){ //调用你的自定义插件$.fn.accordion = function(options) { return this.each(function() { var dts = $(this).children('dt'); dts.click(onClick); dts.each(re
复制链接

扫一扫