javascript - 多级选择栏

Question

我正在尝试做一个多级选择栏。但我不确定如何创建这种类型的栏。我曾尝试使用通用的导航栏方法，但没有按照我想要的方式进行。

我想做这样的事情，这里是引用照片:

有什么建议吗？或者有没有类似的例子？ (请在 fiddle 示例中显示。)

谢谢!

Answer 1

你想创建一个多级无序列表，每个列表项都有子项，包含另一个无序列表。例如

<ul class="parent">
    <li>
        <a href="#">Category</a>
        <ul class="child">
            <li>
                <a href="#">Sub-category</a>
                <ul class="grandchild">
                    <li>
                        <a href="#">Sub-sub-category</a>
                        <ul class="great-grandchild">
                            <li>
                                <a href="#">sub-sub-sub category</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Sub-category 2</a>
            </li>
        </ul>
    </li>
    <li>Category 2</li>
    <li>Category 3</li>
    <li>Category 4</li>
    <li>Category 5</li>
</ul>

然后你会用 css 隐藏所有的 child /孙子等，并在 parent:hover/active 上显示它们

ul:not('.parent') {
    display: none;
}

ul.parent > li:hover > ul,
ul.child > li:hover > ul,
ul.grandchild > li:hover > ul,
ul.great-grandchild > li:hover > ul {
    display: block;
}