jquery树插件扩展项目

时间:2014-03-07 13:30:46

标签: javascript jquery html css twitter-bootstrap

我有一些看起来像这样的HTML:

<div class="list-group">
    <a id="427" href="#" class="list-group-item"><i class="fa indent0 fa-caret-down"></i>Home</a>
    <a id="428" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Images</a>
    <a id="429" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Videos</a>
    <a id="430" href="#" class="list-group-item"><i class="fa indent1 fa-caret-right"></i>Documents</a>
    <a id="431" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>Sub category</a>
    <a id="432" href="#" class="list-group-item" style="display: none;"><i class="fa indent2 fa-caret-down"></i>Another sub</a>
    <a id="433" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent3"></i>Super sub</a>
    <a id="434" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>asdfasdf</a>
    <a id="435" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>asdf</a>
    <a id="436" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Audio</a>
</div>

当我点击 .fa 时,我希望它在缩进加1之间加上1和具有相同缩进类的下一个项目以取消隐藏。 所以在这种情况下,

如果我们按下id 430 ,则会显示431,432,434和435。

现在,这很容易。我还需要做的是检查 430 436 之间的任何元素(在这种情况下),如果任何元素具有类 fa-照顾然后它也显示了那些孩子。

目前我已经把它变成了一个插件,我的代码确实有用,但我认为它可能更整洁。 我希望你的一些大师会看到一个更简单的解决方案。

目前我的解决方案是:

events: function () {
    var self = this;

    $(self.element).on("click", ".fa", function (e) {
        e.stopPropagation();

        var $target = $(this);
        var indent = $target.prop('className').match(/\b(indent\d+)\b/)[1];

        if ($target.hasClass("fa-caret-right")) {
            $target.removeClass("fa-caret-right").addClass("fa-caret-down");
            self.showChildren($target.parent(), indent);

            if (typeof self.options.onItemExpand === "function") {
                self.options.onItemExpand.apply(this, arguments);
            }
        } else {
            var $children = $target.parent().nextUntil("a:has(." + indent + ")");

            $target.removeClass("fa-caret-down").addClass("fa-caret-right");
            $children.hide();

            if (typeof self.options.onItemContract === "function") {
                self.options.onItemContract.apply(this, arguments);
            }
        }
    })
},
showChildren: function ($target, className) {
    var self = this;
    var num = parseInt(className.match(/(\d+)$/)[1], 10);
    var $children = $target.nextUntil("a:not(:has(.indent" + (num + 1) + "))");

    $.each($children, function (i, item) {
        var $item = $(this).find(".fa");
        if ($item.hasClass("fa-caret-down")) {
            var indent = $item.prop('className').match(/\b(indent\d+)\b/)[1];
            self.showChildren($(this), indent);
        }
    });

    $children.show();
}

我的解决方案几乎可行(虽然我希望有人可以让它更整洁)但是有一个问题。 如果您点击主页,它将隐藏所有内容(按预期方式),但如果您再次点击再次显示,则会显示除音频之外的所有内容。如果您向下扩展到 Documents&gt;会发生同样的事情。另一个子> Super sub 并扩展它。合同时,音频将消失。

http://jsfiddle.net/sn92W/

我认为这与 nextUntil

有关

请帮助:)

0 个答案:

没有答案