jQuery响应式多页菜单鼠标悬停/离开交互

Question

由于项目的响应性，

级菜单带有非常规的html标记。这意味着我不能像创建嵌套菜单时那样使用嵌套的 ul 和 li 。

我创建了一个小提琴，在鼠标悬停时加载了正确的下一个菜单，但在mouseleave上菜单保持不变。

我希望菜单的行为类似于悬停互动，并在光标离开相应的子级别后隐藏

http://jsfiddle.net/umbriel/pqbvkuoy/

$('.level2').hide();
$('.level3').hide();


$('.level1').find('ul .active').mouseover( function(){
    $('.level2').show();
});

$('.level2').find('ul .active').mouseover( function(){
    $('.level3').show();
});

谢谢

Answer 1

您可以使用 hover() 事件和 toggle() 。试试这个：

$('.level1').find('ul .active').hover( function(){
        $('.level2').toggle();
});

检查此 DemoFiddle