HTML 中带有子菜单的动态菜单

Question

我有一个菜单，大概是这样的：

<ul id="menu_cat">
    <li><a class="cat1" href="#">category 1</a>
    <ul>
    <li><a class="cat2" href="#">category 2</a>
        <ul>
            <li><a class="cat3" href="#">category 3</a></li>
            <li><a class="cat3" href="#">category 3</a></li>
            <li><a class="cat3" href="#">category 3</a></li>
        </ul>       
    </li>
    <li><a class="cat2" href="#">Category 2</a>
        <ul>
            <li><a class="cat3" href="#">category 3</a></li>
            <li><a class="cat3" href="#">category 3</a></li>
            <li><a class="cat3" href="#">category 3</a></li>
        </ul>
    </li>
    <li><a class="cat2" href="#">Category 2</a>
        <ul>
            <li><a class="cat3" href="#">Category 3</a></li>
            <li><a class="cat3" href="#">category 3</a></li>
            <li><a class="cat3" href="#">category 3</a></li>
        </ul> 
    </li>
    </ul> <!-- End of CAT1-->
    </li> <!-- End of .Krmiva -->
</ul>

现在我需要使其动态化，因此“类别 1、2、3”取自 MySQL 数据库，但我可以想到任何其他解决方案，而不是将其设置为 CAT1、CAT2、CAT3 等 3 个表对于 CAT1 中的每个项目，从 CAT2 中选择子菜单，对于每个 CAT2，从 CAT3 中选择子菜单......这意味着要进行 20 个 SELECT * FROM 查询。

有什么想法吗？谢谢，迈克。

Answer 1

最好的办法是只有一个类别表，其中包含一个“父”字段，然后您所要做的就是根据其父级递归地选择每个类别。

所以，首先找到没有任何父类（或根父类 0）的第一个类别，然后选择具有前一个类别作为父类的第一个类别。依此类推，直到您所在的类别没有子类别，然后在表格中回溯，重复该过程。

Eimantas 评论中链接到的站点点文章对此进行了非常详细的概述：Storing Hierarchical Data in a Database

Answer 2

是的，杰米给了正确的东西。您可以以这种方式或其他替代方式在数据库中维护。您可以为此准备递归循环。

如果它是 2 级，我认为它会很好地工作，但是对于多个层次结构，你需要调整你的 css。