jquery - jquery中的多级菜单

Question

我用 CSS 和 jquery 创建了一个多级菜单

看到这个:http://jsfiddle.net/YhgBw/

我无法将鼠标带到第二层。一旦我将鼠标移动到第二级，脚本就会隐藏完整菜单。

脚本:

$('#bigmenu').hide();
$('#bigmenu_side').hide();
$('#mydiv').mouseenter(function (e) {
    $('#bigmenu').fadeIn(100);
});
$('#bigmenu').mouseleave(function (e) {
    var inFocus = $("#search_by_profile_id").is(":focus");
    if (!inFocus) {
        $(this).fadeOut(100);
    }
});

$('.bd_hover_change_color').mouseenter(function (e) {
    if (event.target.id == 'bd_menu_register') {
        $('#bigmenu_side').html("option A <br> option B <br> option C");
    }
    $('#bigmenu_side').show();
});
$('.bd_hover_change_color').mouseleave(function (e) {
    $('#bigmenu_side').html("");
    $('#bigmenu_side').hide()
});

Answer 1

这是您代码中的逻辑问题。您还必须确保当鼠标悬停在 bigmenu_side 上时菜单不会淡出。为此，将 bigmenu_side 的类设置为 bd_hover_change_color 以便它满足 $('.bd_hover_change_color').mouseenter 的要求功能。

试试这个更新的 fiddle :http://jsfiddle.net/YhgBw/24/

更新:我以前的 fiddle 链接存在一些问题，其中搜索和文本字段变得无法使用，再次更新它以获得功能齐全的菜单。