多级动态列表jQuery

单击列表元素时，它应该展开（显示）childs，第二次单击后，它应该再次全部关闭。 我做了这个：

功能fajnalista（dis）{
$（dis）.find（“.list_child”）.toggle（）.css（{“列表样式类型”：“square”}）；
$（dis.find（“.list_child”）.toggle（）.css（{“可见性”：“可见”}）；
$（dis.find（“.list_child”）.toggle（）.css（{“height”：“initial”}）；
}

---

但有一个问题-当我删除第二行，或当我移动它不能正常工作。实际上，“列表样式类型”应该为扩展的“li”而不是它的子项进行切换。

这就是它应该如何工作：）唯一的问题是我对jQuery中toggle（）的理解。

<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>

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