Question

我创建了一个PHP脚本，可以创建一个可爱的列表......

使用数据库可以创建大量项目和子项目。因为它来自数据库，所以它们可以是不确定的深度列表和子列表。

我如何使用CSS（或直接将代码放在UL / LI中）以允许INFINITE子项显示为父母的父母？？/ / p>

示例：

<ul>
  <li>Welcome! - LevelNo:0 ID:1 Parent:0 Order:0</a>
    <ul>
      <li>Test - LevelNo:0 ID:13 Parent:1 Order:-3</a></li>
      <li>Cars - LevelNo:1 ID:2 Parent:1 Order:0</a>
        <ul>
          <li>Bugatti - LevelNo:2 ID:5 Parent:2 Order:0</a></li>
          <li>BMW - LevelNo:2 ID:6 Parent:2 Order:1</a>
            <ul>
              <li>1 Series - LevelNo:3 ID:8 Parent:6 Order:0</a>
                <ul>
                  <li>1 Series D- LevelNo:0 ID:14 Parent:8 Order:0</a></li>
                </ul>
              </li> 
              <li>3 Series - LevelNo:3 ID:9 Parent:6 Order:1</a></li>
              <li>5 series - LevelNo:3 ID:10 Parent:6 Order:2</a>
            <ul>
              <li>525 - LevelNo:4 ID:11 Parent:10 Order:0</a></li>
              <li>M5 - LevelNo:4 ID:12 Parent:10 Order:1</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Noble - LevelNo:2 ID:7 Parent:2 Order:2</a></li>
    </ul>
  </li>
  <li>Vans - LevelNo:1 ID:3 Parent:1 Order:1</a></li>
  <li>Trucks - LevelNo:1 ID:4 Parent:1 Order:2</a></li>
</ul>
<br>

我已经找到了很多例子来展示如何与一个孩子（两个深）或一个孩子（三个深）一起做，但没有任何动态将它显示到15深，如果这是多少子项目已添加。

有人对此有任何想法吗？

我可以改变生成列表的代码，使用CSS ......任何人都能指出我正确的方向吗？

Answer 1

首先，让我说一个无限大的列表是一个很大的UI哦哦。它越深，用户友好性就越低。

话虽这么说，我有一个这样的列表，我正在护理，直到应用程序可以重新设计。我的前同事选择输出有效的HTML嵌套UL，就像你所做的那样。对于演示文稿，我们发现的任何内容都无法胜过jQuery Superfish。

它有多深？无穷。我在我的应用程序中看到它7。再说一次，如果给出选择，我就不会这样做....但你可以。

为什么jQuery在技术上可以 - 可以 - 用纯CSS完成？初学者的渐进增强。低开销，优雅的后备。并且演示文稿允许转换，大型元素的动态大小调整等。如果您有时间构建，部署和运行数百个单元测试，那么您可以执行此代码。

全部通过简单的$('#id').superfish()电话。

Answer 2

我建议您尝试这样的事情：

ul { display:none; }
*:hover > * { display: block; } 
* *:hover { display: block; }
*:hover { display: block; }

每当你悬停一个ul时，所有的孩子都会显示ul（第二条规则），所有的父元素都会显示出来（第三条规则），并显示元素本身（第四条规则）。

这只是一个草图，我没有在任何浏览器中尝试它，我希望有很多不兼容性。

动态/ Infinate UL / LI Hover扩展....？

2 个答案: