如何将一系列嵌套列表转换为米勒列？

Question

我希望将一系列嵌套列表显示为Miller Columns，其功能是点击父级会显示下一个列表，依此类推。

我已经看过各种解决方案，需要将数据解析为json，但这些并不适合我的情况，并希望在普通的html中做同样的事情。

我的标记是标准的嵌套列表。

<ul>
<li><a href="">Column 1</a></li>
<li><a href="">Column 1</a></li>
<li><a href="">Column 1</a></li>
<li><a href="">Column 1</a>
    <ul>
    <li><a href="">Column 2</a>
        <ul>
        <li><a href="">Column 3</a>
        <ul>
        <li><a href="">Column 4</a></li>
        <li><a href="">Column 4</a></li>
        <li><a href="">Column 4</a></li>
        <li><a href="">Column 4</a>

        </li>
        </ul>
        </li>
        <li><a href="">Column 3</a></li>
        <li><a href="">Column 3</a></li>
        <li><a href="">Column 3</a>

        </li>
        </ul>
    </li>
    <li><a href="">Column 2</a></li>
    <li><a href="">Column 2</a></li>
    <li><a href="">Column 2</a></li>
    </ul>
</li>
</ul>

任何指针都非常赞赏。

Answer 1

将列显示为Miller Columns

<强> Fiddle link.

这应该可以帮助你完成大部分工作。有很简单的CSS解决方案。如果您需要CSS中的输出而不是SASS，那么有很多在线/转换器或编译器，但我也会在答案中包含它。

ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block; }
ul > li > ul {
  position: absolute;
  top: 0;
  left: 100%;
  padding-left: 10px; }

只是使用列作为每个后续列的上下文位置，然后将其推送到其父级的右侧。

修改

删除了空格和文本溢出属性，因为它们无法解决此问题。

提供Miller Columns的交互

编辑：第二部分

Here's your updated fiddle.

同样，这只是使用CSS来处理以实物形式显示的列，并使用jQuery帮助程序来应用适当的类。我添加了一些装饰，因为纯文本在说明交互方面没什么帮助。

这是附加的CSS：

ul > li {
 background-color: #075883; }

ul > li a {
  color: white;
  padding: 5px;
  display: block;
  text-decoration: none; }

ul > li.expanded > ul {
  overflow: visible;
  max-width: 500px;
  transition: 0.2s; }

这里是必要的jQuery（也可以在原生JS中轻松完成）。

$('li a').on('click', function() {
  $(this).parent().toggleClass('expanded').siblings().removeClass('expanded'); 
});