1

cssとjqueryでマルチレベルメニューを作成しました

これを参照してください：http://jsfiddle.net/YhgBw/

マウスを第 2 レベルに移動できません。マウスを第 2 レベルに移動するとすぐに、スクリプトは完全なメニューを非表示にします。

脚本 ：

$('#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()
});
4

1 に答える 1

0

これは、コードの論理上の問題でした。また、マウスが の上にあるときにメニューがフェードアウトしないようにする必要がありましたbigmenu_side。これを行うには、関数の要件を満たすようにbigmenu_sideasのクラスを設定します。bd_hover_change_color$('.bd_hover_change_color').mouseenter

この更新されたフィドルを試してください: http://jsfiddle.net/YhgBw/24/

更新：検索とテキストフィールドが機能しなくなった以前のフィドルリンクにいくつかの問題があり、完全に機能するメニューのために再度更新しました。

于 2013-01-19T21:07:22.887 に答える