Question

点击列表元素应该展开（显示）孩子，在第二次点击后，它应该再次全部折叠。我做了这个：https://jsfiddle.net/Zydnar/o6wkobfv/3/

<ol id="list">
    List title
    <li onclick="fajnalista(this)">
        Item 1
        <ol>
            <li class="list_child"></li>
            <li class="list_child"></li>
            <li class="list_child"></li>
            <li class="list_child"></li>
            <li class="list_child"></li>
        </ol>
    </li>
    <li onclick="fajnalista(this)">
        Item 2
        <ol>
            <li class="list_child"></li>
            <li class="list_child"></li>
            <li class="list_child"></li>
            <li class="list_child"></li>
            <li class="list_child"></li>
        </ol>
    </li>
</ol>

#list {
    list-style-type: circle;
}
.list_child {
    visibility: collapse;
    height: 0px;
}

function fajnalista(dis){
    $(dis).find(".list_child").toggle().css({ "list-style-type": "square" });
    $(dis).find(".list_child").toggle().css({ "visibility": "visible" });
    $(dis).find(".list_child").toggle().css({ "height": "initial" });
}

但是有一个问题 - 当我删除第二行时，或者当我移动它时它没有正常工作。实际上＆＃34; list-style-type＆＃34;应该切换以扩大＆＃34; li＆＃34;不是为了它的孩子。

Answer 1

这是它应该如何工作:)唯一的问题是我对jQuery中的toggle（）的理解。 https://jsfiddle.net/Zydnar/o6wkobfv/4/

function fajnalista(dis) {
        var enabled = true;
        if ($(dis).find(".list_child").css("visibility") === "collapse") {
            enabled = false;
        }
        if (!enabled) {
            $(dis).find(".list_child").css({
                "visibility": "visible",
                "height": "initial",
                "list-style-type": "square"
            });
        }
        else {
            $(dis).find(".list_child").css({
                "visibility": "collapse",
                "height": "0",
                "list-style-type": "square"
            });
        }}

多级动态列表jQuery

1 个答案: