创建多层下拉式Java脚本菜单的任何提示/指南？

Question

我目前正在尝试学习Javascript，以便创建一个仅在单击时可扩展的多级菜单。 我之所以尝试这样做的原因，而不是简单地在CSS中使用element:hover是因为我的菜单中有很多菜单项，并且当子菜单在“未经允许”的情况下随便在鼠标悬停时随机扩展时，它可以使获得某些菜单选项更加困难且令人沮丧。 由于我想避免让访客感到沮丧，所以我试图使其在“点击时”正常工作。

我觉得我的基本思想已经下降，但是显然缺乏执行力。 我看过其他onClick代码的示例，但它们仅用于1级子菜单，并且具有4级菜单。

这是我的代码。 http://jsfiddle.net/bbm4hzs8/

HTML

<div id="navbar">

<ul id="Nav-Menu">
    <li class="Nav-Tabs"><a href="#">Link</a>
        <ul id="Sub-Menu">
            <li class="Sub-Tabs"><a href="#">Sub Menu Links Here</a>
                <ul id="Drop-Menu">
                    <li class="Drop-Tabs"><a href="#">Drop Meny Links Here</a>
                        <ul id="Slide-Menu">
                            <li class="Slide-Tabs"><a href="#">Slide Out Menu Links Here</a>
                            </li>
                            <li class="Slide-Tabs"><a href="#">Slide Out Menu Links Here</a>
                            </li>
                            <li class="Slide-Tabs"><a href="#">Slide Out Menu Links Here</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

</div>

使用Javascript

function MenuClick( ) {

        /* ------- Defining Variables ------ */

        var Nav-Tabs = document.getElementByClassName("Nav-Tabs");
        var Sub-Tabs = document.getElementByClassName("Sub-Tabs");
        var Drop-Tabs = document.getElementByClassName("Drop-Tabs");

        if (Nav-Tabs.onClick) {
            Parent = Nav-Tabs;
            Child = document.getElementById("Sub-Menu");
        }
        if (Sub-Tabs.onClick) {
            Parent = Sub-Menu;
            Child = document.getElementById("Drop-Menu");
        }
        if (Drop-Tabs.onClick) {
            Parent = Drop.Menu;
            Child = document.getElementById("Slide-Menu");
        }

        /* -------- Parameters ------------ */

        if ( Parent.onClick) {
            if (Child.style.display = "none") {
                Child.style.display = "block";
            }
            else Sub-Menu.style.display = "none"
        }
    }

    /* ------ Activate Menu Buttons ------ */

    document.getElementByClassName("Nav-Tabs").onClick = MenuClick;
    document.getElementByClassName("Sub-Tabs").onClick = MenuClick;
    document.getElementByClassName("Drop-Tabs").onClick = MenuClick;

我的目标是要有一个可以在单击时扩展，在单击时收缩的菜单，如果要在打开子菜单时单击其他菜单项，则该子菜单将关闭。 那有意义吗？ 我知道这段代码只能解决onclick的扩展/收缩问题，但是我一次只能解决一件事。

我怀疑我出了问题的地方是if (Nav-Tabs.onClick) ，因为我非常确定这不是我实际上应该针对该动作的方式，但是我在任何地方都找不到参考，这可能是肯定的迹象我做错了。 。 。 。 救命？

这是一个JSfiddle，显示了我的菜单如何作用于纯CSS。 显然，需要解决一些放置问题，但是当您缩小屏幕并尝试使用菜单时，您会看到我遇到的问题。 这几乎是不可能的。 http://jsfiddle.net/tqbg1rpL/

顺便说一句，如果有人对我如何以其他方式处理此问题有建议，我很乐意提出建议。 但是，我真的希望能广泛支持的选项可以在智能手机或平板电脑上使用。 显然有一个CSS hack（忘记了它的名字），但是还没有太多支持。

我期待看到你们的想法！

Answer 1

我最近在http://bootcamp.mit.edu/导航栏上实现了类似的功能。

我建议您使用响应式框架，例如引导程序或基础。 这将使您的生活变得更简单，并且您可以阅读未缩小的源文件，作为有关这些内容通常如何实现的教程-有许多针对特定浏览器和设备细微差别的修复程序。 以下是我的引导程序经验：

首先，我使用了引导导航栏http://getbootstrap.com/components/#navbar ，然后使用您正在讨论的方式（单击和off单击）使菜单展开和折叠（ on单击和off单击），我使用了Yamm： http：/ /geedmo.github.io/yamm/