Petit JavaScript/JQuery mouseleave question

Question

je me suis ce petit en utilisant JavaScript jQuery qui glisse vers le bas une ul lorsqu'une image est cliqué:

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

}); 

Je me demandais si je pouvais modifier pour reconnaître quand la souris quitte la ul/image et faites-le glisser au lieu d'avoir à nouveau cliquer sur l'image. Si j'utilise quelque chose d'autre que click(), il ne s'appliquera (naturellement) qu'à l'image et ne reconnaîtra pas le ul en tant qu'objet. Aucune suggestion?

Answer 1

Voici le code entier (ajouté une image de permutation à le tout), travaillant à tous les principaux navigateurs (mis à jour) en ce moment. Pas très propre et probablement pourrait être fait plus facile mais cela fonctionne:

$(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"); 
     } 
    });  

    } 

}); 

Answer 2

vous pouvez utiliser jquery mouseout()

Answer 3

Essayez cette

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

---

ou

$ ('img.menu_class') de liaison ('vol stationnaire', function() {$ ('ul.the_menu') slideToggle ('moyen');. }.)

---

Utilisez ce code.

Ceci est mon code mis à jour

Utilisez ce code pour slideDown ur liste une fois en vol stationnaire de la souris sur l'image et reste ouverte

 
$(document).ready(function() { 

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

//to close ul 

$('#id_of_close_element').bind('click',function() { 
$('ul.the_menu').slideUp('medium'); 
}); 

});