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

Question

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

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

当我们点击按钮而不是鼠标悬停时，会显示下拉菜单的位置，请帮助。

提前谢谢。

http://jsfiddle.net/PSUkW/

Answer 1

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

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

我让jQuery在每个单击的顶级li上切换类.clicked，而不是让浏览器使用:hover伪类触发dropdown。这会产生相同的行为，但使用JS。

这一行：

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

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

演示：

Answer 2

非常简单。在CSS中添加样式并在li:hover上显示下拉菜单，您可以更新它以添加一个类:类似于.menu ul li.click ul。然后两行jQuery指向该单击操作。

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