展开和折叠 JavaScript

Question

我注意到在我的以下 JavaScript 代码中添加展开和折叠的帮助。我想要折叠时的 +（加号）图像和展开时的 -（减号）图像。请帮我编写代码。请查看数据源，如果我点击手表，它将展开并显示手表，当我再次点击手表时，泰坦将消失。

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 应该适用于所有浏览器。