在没有Jquery的情况下动态创建可折叠列表

Question

我正在尝试动态创建项目的HTML列表，但我无法理解如何使列表可折叠。现在我只能动态创建列表项。此外，如果有人有代码优化的建议，他们总是受欢迎。我只限于Javascript和HTML。列表的样本。数据很长，所以我希望能够在点击时最小化scriptlog的列表项。

false true true true

Answer 1

一个简单的解决方案是在您的<li>代码中添加点击事件监听器，并为子'none'代码设置显示为<ul>。

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

See plnkr

Answer 2

您可以更新元素的style.display属性以显示或隐藏它。正如CDelaney所指出的，这可以在click事件监听器中完成。

如果JavaScript闭包中的变量中已有目标li和ul元素，则可以直接从内联addEventListener函数中引用它们，而无需进行任何查找ID或HTML属性。

查看下面的示例代码段以查看其实际效果。

＆＃13;

＆＃13;

var source = {
  text: "1",
  items: [
      {text: "1A"}, 
      {text: "1B", items: [
          {text: "1B-i"}, 
          {text: "1B-ii"}, 
          {text: "1B-iii"}, 
          {text: "1B-iv", items: [
              {text:"1B-iv-a"},
              {text:"1B-iv-b"},
              {text:"1B-iv-c"}
          ]}
      ]}, 
      {text: "1C", items:[
          {text:"1C-i"},
          {text:"1C-ii"},
          {text:"1C-ii"}
      ]},
    { text: "1D"}]
};

var rootNode = document.getElementById("actionData");
createListFromObject(source, rootNode);

function createListFromObject(obj, element) {
  if (obj.text) { // add text node
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(obj.text));
    element.appendChild(li);
  }
  if (obj.items) { // add child list
    var ul = document.createElement("ul");
    element.appendChild(ul);
    if (li) {
      li.style.cursor = "pointer";
      li.style.color = "blue";
      li.style.textDecoration = "underline";
      // make clicking the text node toggle the child list's visibility:
      li.addEventListener("click", function() {
        ul.style.display = ul.style.display === "none" ? "inherit" : "none";
      });
    }
    for (var i = 0, len = obj.items.length; i < len; i++) {
      createListFromObject(obj.items[i], ul);
    }
  }
}

＆＃13;

<ul id="actionData"></ul>

＆＃13;

＆＃13;

＆＃13;