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

:hover是一个css类，你可以用来改变......悬停的东西的外观。

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

jQuery可能类似于

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

可以使用.slideDown.toggle等显示/隐藏。

Answer 2

从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 3

它的简单只是改变你的脚本。无论你在哪里使用

的onmouseover

将其更改为

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

3 个答案:

的onmouseover

的onclick