javascript - 不使用 Jquery 动态创建可折叠列表

Question

我正在尝试动态创建 HTML 项目列表，但我无法理解如何使列表可折叠。现在我只有一种方法来动态创建列表项。此外，如果有人对代码优化有建议，我们随时欢迎。但我仅限于 Javascript 和 HTML。列表的示例。数据很长，因此我希望能够在单击时最小化 scriptlog 的列表项。

        var self = this;
        var nameItem = document.createElement("li");
        var dateItem = document.createElement("li");

        nameNode = document.createTextNode("Name: " + session.name);
        dateNode = document.createTextNode("Date: " + session.date);
        nameItem.appendChild(nameNode);
        dateItem.appendChild(dateNode);
        var element = document.getElementById("sessionData");
        element.appendChild(nameItem);
        element.appendChild(dateItem);

        session.actions.forEach(function(action, index) {
            console.log(action);

            var listItem = document.createElement("li");
            var node = document.createTextNode(action.name);
            var nestedUl = document.createElement("ul");
            var dataUl = document.createElement("ul");
            var scriptUl = document.createElement("ul");
            var versionUl = document.createElement("ul");

            var scriptLi = nestedUl.appendChild(document.createElement("li"));
            var dataLi = nestedUl.appendChild(document.createElement("li"));
            var versionLi = nestedUl.appendChild(document.createElement("li"));
            var scriptInfo = scriptUl.appendChild(document.createElement("li"));
            var dataInfo = dataUl.appendChild(document.createElement("li"));
            var versionInfo = versionUl.appendChild(document.createElement("li"));

            scriptLi.appendChild(document.createTextNode(action.script));
            dataLi.appendChild(document.createTextNode(action.data));
            versionLi.appendChild(document.createTextNode(action.version));
            scriptInfo.appendChild(document.createTextNode(action.scriptTxt));
            dataInfo.appendChild(document.createTextNode(action.dataTxt));
            versionInfo.appendChild(document.createTextNode(action.versionTxt));

            scriptLi.appendChild(scriptUl);
            dataLi.appendChild(dataUl);
            versionLi.appendChild(versionUl);
            listItem.appendChild(node);
            listItem.appendChild(nestedUl);

            var element = document.getElementById("actionData");
            element.appendChild(listItem);
        });

Answer 1

一个简单的解决方案是将点击事件监听器添加到您的 <li>标签并将显示设置为 'none'为 child <ul>标签。

listItem.addEventListener("click", function() {
    var ul = document.getElementById('ul-' + action.name);
    ul.style.display = ul.style.display === '' ? 'none' : ''; 
});

See plnkr