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

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

1 个答案: