在鼠标悬停时显示/隐藏的导航菜单并单击

Question

我想知道是否有可能有一个仅 CSS 的导航菜单，当单击或滚动导航元素时切换到显示/隐藏其他 div？

这是我的意思的一个例子：http://www.johnlewis.com

请注意，在该网站上，CSS 悬停导航菜单即使在禁用 Javascript 的情况下也能正常工作。

问题 1： 有没有关于如何创建此类菜单的教程或示例？我看过一些基于标签的菜单教程，但它们看起来不像这样。

问题 2： 我能否复制该示例，同时在单击顶级菜单项时显示子菜单（不仅仅是滚动）。这对于无法进行翻转的平板电脑用户很有帮助。在第一次单击时，我希望出现子菜单。在第二次单击同一顶级项目时，我希望它转到该实际链接。这需要 JS/JQuery 还是只能用 CSS 完成？

我不介意使用 JQuery 解决方案，但如果可能，我更喜欢 CSS 解决方案。我只需要一些指示，当然不是完整的解决方案。

Answer 1

这可以使用 CSS 和 :hover 伪选择器作为父 div，并在您单击它时添加一个类（对于平板电脑）。举个简单的例子，你需要这样的结构：

<div class="nav-header">
    <h3>My Header</h3>
    <div class="sub-menu">
        <!-- Your sub menu code -->
    </div>
</div>

你的 CSS 看起来像这样：

div.nav-header div.sub-menu {
    display: none;
}

div.nav-header:hover div.sub-menu, div.nav-header.clicked div.sub-menu {
    display: block;
    /* your positioning code */
}

然后在点击事件处理程序中：

function click_handler(eventArgs) {
    // Often, jQuery click event targets are the children of the element you actually want.
    var $navHeader = $(eventArgs.target).hasClass('nav-header') ? $(eventArgs.target) : $(event.target).parents('div.nav-header');

    if ( $navHeader.hasClass('clicked') ) {
        window.location.href = "/yourUrl";
    } else {
        $navHeader.addClass('clicked');
    }
}