jquery简易手风琴插件的封装

关于“jquery简易手风琴插件的封装”的攻略，我将分为以下几个部分进行讲解：

1. 理解手风琴列效果和实现原理
2. 设计插件结构
3. 编写插件代码

1. 理解手风琴列效果和实现原理

手风琴列（Accordion）是一种常见的页面导航方式，有多个面板收缩展开，每次只有一个面板是展示状态。实现起来，我们需要使用jQuery将面板切换的效果进行封装。

2. 设计插件结构

在设计插件结构的时候，需要考虑插件的使用方式和传参方式。通常来说，我们可以将手风琴列封装成jQuery的一个插件，使用者只需要简单的调用它，即可实现手风琴列的效果。同时，也需要考虑插件所需参数以及默认参数值。

插件结构如下：

(function ($) {
    $.fn.accordion = function (options) {

        var settings = $.extend({
            // 默认参数
            ...
        }, options);

        return this.each(function () {
            // 插件方法
            ...
        });
    }
})(jQuery);

3. 编写插件代码

在编写插件代码时，需要根据插件结构，设置参数、获取元素、事件绑定等。下面给出一个简单示例：

(function ($) {
    $.fn.accordion = function (options) {

        var settings = $.extend({
            // 默认参数
            panel: '.panel',
            title: '.title',
            content: '.content',
            activeIndex: 0,
            ...
        }, options);

        return this.each(function () {
            var $this = $(this);
            var $panels = $this.find(settings.panel);
            var $titles = $this.find(settings.title);
            var $contents = $this.find(settings.content);

            $panels.on('click', function () {
                $(this).toggleClass('active').siblings().removeClass('active');
                $(this).find(settings.content).slideToggle().end().siblings().find('.content').slideUp();
            });

            $titles.eq(settings.activeIndex).addClass('active');
            $contents.eq(settings.activeIndex).show();
        });
    }
})(jQuery);

在这个示例中，首先我们定义了插件的默认参数，并使用 $.extend() 方法将使用者传入的参数进行合并。然后，在每个匹配元素的上下文中，我们获取了对应的元素并绑定了点击事件。同时，我们也给予了初始的激活状态。

以上是一个简单的手风琴列插件代码示例，它可以实现手风琴列的效果。需要注意的是，实际在编写 handwind 插件代码时，还需要考虑到一些异常情况的处理及代码的可维护性和可扩展性。