javascript - 如何使这个基于 CSS 的菜单在单击时打开和关闭，而不是在悬停时打开并在鼠标移出时关闭？

Question

css 菜单的工作版本在这里http://jsfiddle.net/nexU/PEvrW/1/并且它适用于所有浏览器，并且在将悬停更改为单击后，菜单也必须继续在所有浏览器上工作。

jsfiddle 上的完整菜单标记

.menu ul li a:hover {background:#fff; color:#000;}

正如您所看到的，我需要的只是使菜单在单击时打开，并在单击时关闭，这样当用户单击一个选项卡时，该选项卡将保持打开状态，除非通过单击选择另一个选项卡，或者再次单击相同的选项卡关闭它.. 我已经尝试过 JQuery，但无法让它工作，并查看了其他帖子，但提示也不起作用。换句话说，菜单必须像点击时激活的引导菜单一样工作：http: //twitter.github.io/bootstrap/components.html#buttonDropdowns

在此先感谢您的帮助。

Answer 1

从http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html可以看出，纯 CSS 菜单可以工作并且实际上很容易做到，只需使用:active伪类即可。

这是所有带有适当 CSS 选择器的 CSS 菜单的基本结构。

注意：有很多方法可以构建 HTML，我选择了这些标签，因为它们在下面的 css 选择器中是明确的。这种形式的几乎任何结构都有效。

<menu>
    <div>
        <a href="#non-existant-tag-to-avoid-jumping-to-it">Tab #1</a>
        <li>
            ...
        </li>
    </div>
    ...
</menu>

和 CSS 选择器：

menu > div > li {
    /* rules to hide it */
}
menu > div > a:active + li, /* clicked */
menu > div:hover > li { /* hovered */
    /* rules to show it */
}

Answer 2

:hover是一个 CSS 类，您可以使用它来更改...悬停上事物的外观。

为了“点击并做事”（即使它基本上改变了某些东西的状态/外观，类似于悬停）使用Javascript。所以你需要添加javascript，可能还有jquery。

jQuery 可能类似于

$('a').click(function() {this.background='#fff'; this.color='#000'})

可能显示/隐藏.slideDown.toggle等。

Answer 3

它很简单，只需更改您的脚本即可。无论您使用过什么地方

鼠标悬停

将其更改为

点击