无法使用方法从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');
    }
};

知道怎么解决我的问题吗？

FYI，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;
}

Answer 1

有时简单的事情就不那么明显了。

我的问题是css规则中的类型，特别是类名。它应该是：

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