展开和折叠JavaScript

我在下面的JavaScript代码中添加了扩展和折叠的帮助。我希望在折叠时使用+（加号）图像，在扩展时使用-（减号）图像。请帮我编写代码。请查看数据源，如果我单击watch，它将展开并显示watch，当我再次单击watch titan时，watch titan将消失

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

除此之外，我还将您的

onclick

更改为

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

并放置一个

else

语句，为叶节点添加一个类

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

。这应该适用于所有浏览器

你能提供一个提琴吗？从一开始就删除所有

（

和

）

：

var-dataSource=（{“Watch”：（{“Titan”：（{}），}）}）

@user3237973检查我的更新答案，这应该也适用于IE。我想你得到这个数据源是因为一个后端请求？如果是这样，那么您应该在服务器上进行排序。但是如果你需要在浏览器上进行排序，你可以使用json对象数组对数据源进行排序。我仍然需要排序部分。你能给我一个jfiddle吗

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

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