Question

我听取了将扩展和折叠添加到我的以下JavaScript代码的帮助。我想在折叠时使用+（加号）图像，在展开时想要 - （减去）图像。请帮我编写代码。请参阅dataSource，如果我点击观看它会展开并观看将会显示，当我再次点击观看泰坦将会消失。

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

我已从dataSource中删除了不必要的括号，并添加了第三级用于测试目的。

除此之外，我改变的是你的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应适用于所有浏览器。

展开并折叠JavaScript

1 个答案: