jquery - 无法使用方法从 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 is available with my current work .

这是其完整代码:

(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;
}