Javascript 如何使这个基于css的菜单在点击时打开和关闭，而不是在鼠标悬停时打开和关闭？

css菜单的工作版本在这里，它可以在所有浏览器上工作，在将鼠标悬停更改为单击后，菜单也必须在所有浏览器上继续工作

JSFIDLE上的完整菜单标记

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

正如您所看到的，我所需要的是使菜单在单击时打开，然后在单击时关闭，这样当用户通过单击选择一个选项卡时，该选项卡将保持打开状态，除非通过单击选择另一个选项卡，或者重新单击同一选项卡以关闭它。。我已经尝试了JQuery，但无法使其工作，并且查看了其他帖子，但提示也不起作用。换句话说，菜单的工作方式必须与此引导菜单类似，该菜单在单击时激活：

---

提前感谢您的帮助。

：hover

是一个css类，您可以使用它来更改。。。悬停

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

jQuery可能类似于

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

---

可以使用

.slideDown.toggle

或类似工具显示/隐藏。

只需在脚本中进行更改即可。 无论你在哪里使用

安穆塞弗 换成

点击可以看到，纯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>

---

发布你的jQuery尝试。如果你想要完全不同的东西，为什么要选择带有悬停效果的CSS菜单？jQuery有一个菜单插件：我不想要完全不同的东西。我希望这个精确的菜单能够与点击而不是悬停一起工作。鼠标悬停功能不能正常工作，所以我需要替换鼠标悬停来打开和关闭菜单。我试着使用hoverIntent jquery插件，以及其他类似文章中提到的jquery toggle，但可能我没有正确地使用它，因为当我删除悬停并放置toggle和jquery时，菜单就不再工作了。ie:$（“a”）.click（函数（e）{$（this.lim”）.children（“ul”）.toggle（）；}）$（“a”）。单击（）；这个问题与CSS选择器无关。请不要把标签放回去。谢谢你的时间和帮助。我还在一篇文章中读到，要实现点击功能，它需要js/jquery。我尝试用不同的方式使用jquery进行切换，但不起作用：ie:$（“a”）.click（函数（e）{$（this.nexist（“li”）.children（“ul”）.toggle（）；}）$（“a”）。单击（）；当然，您需要做的第一件事是启动浏览器工具并能够看到javascript错误，然后发布这些错误。Firefox和Chrome在这方面都很好。Chrome现在是许多开发者的最爱。

。hover

不是CSS状态，而是一个类。你的意思是

：hover

？谢谢你的提示，但是如果你看一下实际的菜单，你会发现整个菜单都是基于css的，没有脚本，这就是为什么我发布了这个问题。要使菜单与单击一起工作，需要添加js或jquery。

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