jquery - 多级动态列表 jQuery

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" });
}

但有一个问题 - 当我删除第二行时，或者当我移动它时，它无法正常工作。实际上，“list-style-type”应该为扩展的“li”而不是它的 child 切换。

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"
            });
        }}