Javascript 在列中显示嵌套的HTML ul列表

我有一个自动生成的嵌套列表结构，如下所示

<ul>
  <li>AAA</li>
  <li>BBB
    <ul>
      <li>111
        <ul>
          <li>XXX</li>
        </ul>
      </li>
      <li>222</li>
    </ul>
  </li>
  <li>CCC</li>
  ...etc...
</ul>

使用JQuery和一些CSS标记，创建导航样式菜单就相对容易了。e、 g.从第一列中选择BBB，然后使其子项显示在第二列中。隐藏任何其他第二级深度ul

---

让我左右为难的是，首先如何设置列表的样式，将深度放入列中。我可以在每个UL或LI上添加标签以显示深度。但如果我简单地使用相对定位并向左移动每一列，那么第1列将留下一个垂直间隙，其中每个条目都被移动过。绝对定位是可行的，但看起来不太整洁。有更好的想法吗？

使用递归函数这可能非常简单：

如果需要交互性，可以保存哪些元素是哪个父元素的子元素，并在单击时显示相应的元素

var $tr = $("#tr");

function text(x) { // returns text without children
    return x.clone()
            .children()
            .remove()
            .end()
            .text();
}

function add(elem, level) {
    elem.children().each(function() { // iterate children
        var $this = $(this);
        var appendToThis = $tr.find("td").eq(level); // find td to append this level to
        var appendedText = text($this) + "<br>"; // text to append
        if(appendToThis.length) { // if td exists
            appendToThis.append(appendedText);
        } else { // if td doesn't exist yet
            $tr.append($("<td>").append(appendedText));
        }
        var children = $this.children();
        if(children.length) { // call recursively for children, if any
            add(children, level + 1);
        }
    });
}

add($("ul:eq(0)"), 0); // start the process

---

参考资料：

使用递归函数这可能非常简单：

如果需要交互性，可以保存哪些元素是哪个父元素的子元素，并在单击时显示相应的元素

var $tr = $("#tr");

function text(x) { // returns text without children
    return x.clone()
            .children()
            .remove()
            .end()
            .text();
}

function add(elem, level) {
    elem.children().each(function() { // iterate children
        var $this = $(this);
        var appendToThis = $tr.find("td").eq(level); // find td to append this level to
        var appendedText = text($this) + "<br>"; // text to append
        if(appendToThis.length) { // if td exists
            appendToThis.append(appendedText);
        } else { // if td doesn't exist yet
            $tr.append($("<td>").append(appendedText));
        }
        var children = $this.children();
        if(children.length) { // call recursively for children, if any
            add(children, level + 1);
        }
    });
}

add($("ul:eq(0)"), 0); // start the process

---

参考资料：

那么这是如何自动生成的呢？嗯，更重要的是：你能以任何方式改变它吗？可能会添加类或id？你能在某处显示实际代码吗，这样我就可以直观地看到你的问题了？@Lollero-是的，我对生成有一些控制权-这样类和id是可能的。e、 标记深度。那么它是如何自动生成的呢？嗯，更重要的是：你能以任何方式改变它吗？可能会添加类或id？你能在某处显示实际代码吗，这样我就可以直观地看到你的问题了？@Lollero-是的，我对生成有一些控制权-这样类和id是可能的。e、 标记深度。很好的例子。这为我指明了一个明智的方向。谢谢你的好榜样。这为我指明了一个明智的方向。谢谢