Question

我正在寻找一些多个垂直菜单here。我不想要任何下拉菜单。我在我的mysql数据库中使用典型的闭包表层次结构（祖先/后代/深度）用于类别，我想渲染它们。为了从数据库中获取所有父母和孩子，我有以下方法：

   public function getSubtree($node) {
    $tree = $this->connection->query("
    SELECT c.*, cc2.ancestor, cc2.descendant, cc.depth
    FROM
        category c
        JOIN category_closure cc
        ON (c.cat_id = cc.descendant)
            JOIN category_closure cc2
            USING (descendant)
    WHERE cc.ancestor = $node AND cc2.depth = 1
    ORDER BY cc.depth, c.cat_id);

    return $this->parseSubTree($node, $tree);
}

private function parseSubTree($rootID, $nodes) {
    // to allow direct access by node ID
    $byID = array();

    // an array of parrents and their children
    $byParent = array();


    foreach ($nodes as $node) {
        if ($node["cat_id"] != $rootID) {
            if (!isset($byParent[$node["ancestor"]])) {
                $byParent[$node["ancestor"]] = array();
            }
            $byParent[$node["ancestor"]][] = $node["cat_id"];
        }
        $byID[$node["cat_id"]] = (array) $node;
    }

    // tree reconstruction
    $tree = array();
    foreach ($byParent[$rootID] as $nodeID) { // root direct children
        $tree[] = $this->parseChildren($nodeID, $byID, $byParent);
    }

    return $tree;
}

private function parseChildren($id, $nodes, $parents) {
    $tree = $nodes[$id];

    $tree["children"] = array();
    if (isset($parents[$id])) {
        foreach ($parents[$id] as $nodeID) {
            $tree["children"][] = $this->parseChildren($nodeID, $nodes, $parents);
        }
    }

    return $tree;
}

在演示者中我只是：

$this->template->categories = $this->category->getSubtree(1);

因为我使用的是Nette Framework，我使用的是Latte模板引擎，这与Smarty非常相似。为了呈现父母和孩子的所有类别，我有这个：

    <ul class="tree">
    {block #categories}
        {foreach $categories as $node}
            <li>
                <span">{$node["name"]}</span>
                <ul n:if="count($node['children'])">
                    {include #categories, 'categories' => $node["children"]}
                </ul>
            </li>
        {/foreach}
    {/block}
</ul>

我最大的问题是如果我想要三级以上菜单，如何制作CSS样式。如果选择某个类别，则显示其子类别，并隐藏其他类别。选择时，某些子类别显示其子类别，另一个子类别隐藏，依此类推。非常感谢提前，我很抱歉我的英语。希望你知道我的意思。

Answer 1

如果我理解得很好，你需要一个下拉菜单。我猜是对齐是垂直的。子类别，它们应该在类别下还是在旁边？我知道剩下的应该仍然可见。

Answer 2

如果你想要它纯粹垂直，你应该使用onclick和JavaScript。如果是慕斯过来试试这个：

ul {

width: 200px;
position: relative;
list-style: none;
margin: 0;
padding: 0;

}

ul li {

background: #ccc;
border-bottom: 1px solid #fff;
position: relative;

}

ul li ul {

position: absolute;
left: 200;
top: 0;
display: none;

}

ul li：hover ul {

display: block;

}

ul li ul li {

border-left: 1px solid #fff;

}

封闭表中的多个垂直菜单

2 个答案: