javascript - 在列中显示嵌套的 HTML ul 列表

Question

我有一个自动生成的嵌套列表结构，就像这样

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

我想像这样在列中布局:

AAA    111    XXX
BBB    222
CCC

使用 JQuery 和一些 CSS 标记，创建导航样式菜单就相对容易了。例如从第一列中选​​择 BBB，这会使它的子项出现在第二列中。隐藏任何其他二级深度 UL。

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

Answer 1

使用递归函数，这可以非常简单:http://jsfiddle.net/uvxfm/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

引用文献:http://viralpatel.net/blogs/2011/02/jquery-get-text-element-without-child-element.html