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_sideas的类bd_hover_change_color，使其满足$('.bd_hover_change_color').mouseenter函数的要求。

试试这个更新的小提琴：http: //jsfiddle.net/YhgBw/24/

更新：我之前的小提琴链接出现了一些问题，其中搜索和文本字段变得不起作用，再次更新它以获得功能齐全的菜单。