0

画像がクリックされると ul を下にスライドする jQuery を使用して、この小さな JavaScript を取得しました。

$(document).ready(function () {
$('img.menu_class').click(function() {
$('ul.the_menu').slideToggle('medium');
});

});

マウスが ul/image を離れたことを認識し、ユーザーが画像を再度クリックする代わりにスライドさせられるように変更できるかどうか疑問に思っていました。click() 以外のものを使用すると、(自然に) 画像にのみ適用され、ul がオブジェクトとして認識されません。助言がありますか？

4

3 に答える 3

0

これはコード全体 (全体にいくつかの画像スワップを追加) であり、現時点ではすべての主要な (更新された) ブラウザーで動作します。あまりきれいではなく、おそらくもっと簡単に実行できますが、機能します：

$(document).ready(function() {

$('ul.menu_body').hide();

if ($.browser.msie && $.browser.version < 8) {

    $('.dropdown').click(function() {
        if ($('ul.menu_body').is(':hidden')) {

            $('ul.menu_body').fadeIn('medium');
            $('.menu_head').attr("src", "layout/buttonhover.png");
            $('.menu_body').css("font-weight","normal");


        } else if ($('ul.menu_body').is(':visible')) {  
            $('ul.menu_body').fadeOut('medium');
            $('.menu_head').attr("src", "layout/servbtn.png");
        }
    });

} else {

    $('.dropdown').click(function() {
        if ($('ul.menu_body').is(':hidden')) {
            $('ul.menu_body').fadeIn('medium');
            $('.menu_head').attr("src", "layout/buttonhover.png");

        } else if ($('ul.menu_body').is(':visible')) {  
            $('ul.menu_body').fadeOut('medium');
            $('.menu_head').attr("src", "layout/servbtn.png");
        }
    });

    $('.dropdown').mouseleave(function() {
        if ($('ul.menu_body').is(':visible')) {
            $('ul.menu_body').fadeOut('medium');
            $('.menu_head').attr("src", "layout/servbtn.png");
        }
    });     

   }

});
于 2010-12-28T10:45:28.000 に答える
0

jquery mouseout()を使用できます

于 2010-11-30T10:08:33.600 に答える
0

これを試して

$('img.menu_class').bind('mouseleave',function() { $('ul.the_menu').slideToggle('medium'); });

また

$('img.menu_class').bind('hover',function() { $('ul.the_menu').slideToggle('medium'); });

このコードを使用します。

これは私の更新されたコードです

このコードを使用して、マウスを画像の上に置いて開いたままにすると、リストをスライドダウンします

$(document).ready(function () {

$('img.menu_class').bind('hover mouseleave',function() {
 $('ul.the_menu').slideDown('medium');
});

//ul を閉じる

$('#id_of_close_element').bind('クリック',関数() {
 $('ul.the_menu').slideUp('medium');
});

});
于 2010-11-30T10:14:31.527 に答える