无法使用方法从jQuery插件中获取元素

Question

我正在尝试创建一个小的jQuery插件，使元素可折叠或展开。

基本上，该插件要求DOM元素具有标题和内容：

<div class="foldable">
    <div class="foldable-title">Title</div>
    <div class="foldable-content">Content</div>
</div>

当用户点击标题时，应该显示或隐藏内容。即使DOM中嵌套了可折叠元素，也应该起作用。

我的插件按预期工作，当我点击标题时，它的行为符合预期。

然而，我想能够向我的插件添加“方法”，但它不起作用。

控制台中没有错误，仅仅什么都没有发生。

这是我的其中一个方法：

    foldall: function () {
        $(this).each(function () {
            $(this).find(".foldable-unfolded").addClass("foldable-folded").removeClass("foldable-unfolded");
        });

        return this;
    }

我想我的问题来自于this对象。我不确定它的值是否符合预期。它是使用以下模式提供的：

$.fn.foldable = function (methodOrOptions) {
    if (methods[methodOrOptions]) {
        return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
        // Default to "init"
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' + methodOrOptions + ' does not exist on jQuery.foldable');
    }
};

你有什么线索可以帮我解决问题吗？

提供了jsFiddle我的当前工作的链接，供参考。

以下是完整代码：

(function ($) {
    var methods = {
        init: function (options) {
            var opts = $.extend({}, $.fn.foldable.defaults, options);
            this.each(function () {

                var $this = $(this);
                var $title = $this.find(opts.title).first();
                var $content = $this.find(opts.content).first();

                $this.data("foldable", opts);

                $title.css("cursor", "pointer");
                if (!$this.hasClass(opts.foldedClass) && !$this.hasClass(opts.unfoldedClass)) {
                    $this.addClass(opts.unfoldedClass);
                    //$content.hide();
                }
                $title.click(function () {
                    $content.slideToggle(function () {
                        $this.toggleClass(opts.unfoldedClass).toggleClass(opts.foldedClass);
                        if (opts.complete) opts.complete();
                    });
                });
            });
            return this;
        },
        foldall: function () {
            $(this).each(function () {
                $(this).find(".foldable-unfolded").andSelf().addClass("foldable-folded").removeClass("foldable-unfolded");
            });

            return this;
        },
        unfoldall: function () {
            $(this).each(function () {
                $(this).find(".foldable-folded").andSelf().addClass("foldable-unfolded").removeClass("foldable-folded");
            });
            return this;
        }
    };

    $.fn.foldable = function (methodOrOptions) {
        if (methods[methodOrOptions]) {
            return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
            // Default to "init"
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + methodOrOptions + ' does not exist on jQuery.foldable');
        }
    };

    $.fn.foldable.defaults = {
        title: ".foldable-title",
        content: ".foldable-content",
        foldedClass: "foldable-folded",
        unfoldedClass: "foldable-unfolded",
        complete: null
    };

    var foldable = $(".foldable").foldable();

    $(".foldall").click(function () {
        foldable.foldable("foldall");
    });
    $(".unfoldall").click(function () {
        foldable.foldable("unfoldall");
    });
})(jQuery);

还有一些CSS规则：

.folded > .content {
    display:none;
}
.unfolded > .content {
    display:inherit;
}

- Steve B

Answer 1

有时候简单的事情是最不明显的。

我的问题是由于CSS规则中的一个类型错误，具体来说是类名。应该是：

.foldable-folded > .foldable-content {
    display:none;
}
.foldable-unfolded > .foldable-content {
    display:inherit;
}

- Steve B