0

画像とテキストを含む水平メニューを作成しました。
ただし、このコードを使用して、サブメニューを表示および非表示にしました。 

$('#top_menu').hover(function(e) {
    $('#about_submenu').fadeIn('slow');
},function(){
    $('#about_submenu').fadeOut('slow');
});

すべて正常に動作しますが、マウスを親からそのサブメニューに移動すると、。が原因でサブメニューが消えfadeOutます。親リンク位置からカーソルを移動したときにサブメニューを表示し続けるにはどうすればよいですか？

4

2 に答える 2

1

200msなどの小さなタイムアウトでフェードアウトを実装します。サブメニュー項目にカーソルを合わせると、フェードアウトをキャンセルします。

すでに持っているコードの例を次に示します。

var timeoutID;
$('#top_menu').hover(function(e) {
    clearTimeout(timeoutID);
    $('#about_submenu').fadeIn('slow');
},function(){
    timeoutID = setTimeout(hideSubmenu, 200);
});

$('#about_submenu').hover(function(e) {
    clearTimeout(timeoutID);
},function(){
    timeoutID = setTimeout(hideSubmenu, 200);
});

function hideMenu() {
    $('#about_submenu').fadeOut('slow');
}
于 2012-09-26T18:00:59.700 に答える
1

これを試して：

$('#top_menu').hover(function(e) {
    if(!$('#about_submenu').is(':visible'))
    {
        $('#about_submenu').fadeIn('slow');
    }
},function(){
    if(!$('#about_submenu').is(':hover'))
    {
        $('#about_submenu').fadeOut('slow');
    }
});

$('#about_submenu').mouseout(function(){
    if(!$('#top_menu').is(':hover'))
    {
        $('#about_submenu').fadeOut('slow');
    }
});
于 2012-09-26T18:05:23.540 に答える