将CSS悬停菜单转换为jQuery菜单

Question

我在creating the menu found in gmail with css dropdown找到了一篇博文。

当我们将鼠标悬停在按钮上但是我想将其转换为jQuery菜单时，会显示下拉列表

当我们点击按钮而不是鼠标悬停时显示下拉列表，请帮助。

提前致谢。

http://jsfiddle.net/PSUkW/

Answer 1

这是非常简单的逻辑。我用:hover类替换了一些.clicked CSS规则并添加了这个JS：

$('.menu > ul > li').click(function() {
    $(this).siblings().removeClass('clicked');
    $(this).toggleClass('clicked');
});

我没有允许浏览器使用:hover伪类触发下拉列表，而是让jQuery在点击的每个顶级.clicked上切换类li。这会产生相同的行为，但使用JS。

这一行：

$(this).siblings().removeClass('clicked');

基本上从该元素的兄弟节点中删除clicked类，这允许用户一次只下拉一个菜单（否则会发生重叠）。

演示：http://jsfiddle.net/PSUkW/5/

Answer 2

非常简单。在CSS中添加样式并在li：hover上显示下拉列表，您可以更新它以添加类：类似.menu ul li.click ul。然后用两行jQuery来定位点击操作。

请参阅此处的代码：http://jsfiddle.net/PSUkW/3/