Jquery 如何将一系列嵌套列表转换为Miller列？

我希望将一系列嵌套列表显示为，其功能是单击父项显示下一个列表，依此类推

我见过各种各样的解决方案，它们要求将数据解析为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>

非常感谢任何指针。

将列显示为Miller列

这应该能让你走到那里。有相当简单的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列的交互 编辑：第二部分

同样，这只是使用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中轻松完成）

---

一个好的开始：-很容易将标记转换为JSON…谢谢。这就是我发现的一个使用json填充列表的方法。遗憾的是，我不能使用它。这是我的一个简单的响应性实现。这是开源的，请随意贡献。谢谢Josh的努力。我可能应该在我的问题中明确（我会编辑）。这是我正在寻找的Miller列的功能（单击父项、显示子项、单击子项、显示子项等等），而不仅仅是外观。谢谢。没问题，我马上更新小提琴和回应。根本不需要JSON。Ta-da。这应该可以解决所描述的问题。谢谢Josh。这是一个巧妙的解决方案。我也许会以此为基础，但请记住！此外，我还使用superclick.js实现了大致相同的结果，它采用了典型的吸盘鱼菜单，但不是悬停，而是使用单击事件来显示/隐藏菜单。

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