javascript - 展开和折叠 JavaScript

Question

我需要帮助将展开和折叠添加到我的以下 JavaScript 代码中。折叠时我需要 +(加)图像，展开时需要 -(减)图像。请帮助我编写代码来执行此操作。请查看数据源，如果我单击 watch ，它将展开并显示 watch ，当我再次单击 watch 泰坦时，它将消失。

Fiddle

var dataSource = ({
            "Watch": ({
                "Titan": ({}),
            })
        }),
    traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li;

        for (var prop in obj) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(prop));
            li.onclick = function(){alert("Hello")}

            if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
                li.appendChild(traverseObject(obj[prop]));

            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };


window.onload = function () {
    document.getElementById("dvList1").appendChild(traverseObject(dataSource));
}

Answer 1

Live jsFiddle

我已从您的数据源中删除了不必要的括号，并添加了第三个级别用于测试目的。

除此之外，我将您的 onclick 更改为

li.onclick = function(e) {
                e.currentTarget.classList.toggle("hidden");
                e.stopPropagation();
            }

并放置了一个 else 语句，为叶节点添加类 leaf (我们不希望在这些节点上看到减号和加号)。

if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
    li.appendChild(traverseObject(obj[prop]));
} else {
    li.classList.add("leaf");
}

还添加了一些在伪元素中显示标志的 CSS:

ul {
    list-style: none;
}

li.hidden ul {
    display: none;
}

li:before {
    content: '-';
    width: 10px;
    display: inline-block;
}

li.hidden:before {
    content: '+';
}

li.leaf:before {
    content: '';
}

li {
    cursor: pointer;
}

li.leaf {
    cursor: default;
}

<小时/>

编辑:

IE不支持classList，因此将其替换为className。这个solution应该适用于所有浏览器。