javascript - Hide dropdown div with jQuery on mouseout -
i know there hundreds of topics regarding this, none of them seemed work me. want dropdown hide when mouse leaves element jquery, get:
jquery:
$(document).ready(function() { $('.expand').click(function(e) { e.preventdefault(); $('section').slideup('normal'); if ($(this).next().is(':hidden') === true) { $(this).addclass('on'); $(this).next().slidedown('normal'); } }); $('section').hide(); }); $('section').mouseleave(function(){ $(this).hide(); });
i've tried following:
$('section').hide(); $('.section').on('mouseout',function(){ $(this).hide(); })
yet, nothing seems work correctly , gives me same result. how can fix this?
you should use settimeout()/cleartimeout()
functions solve problem you've attach mouseleave
event button class dropbtn
, both mouseleave/mouseleave
events (using hover()
) div dropdown-content
when mouse leave button other element should check if mouseenter
inside dropdown, if yes clear timeout hide_dropdown
not hide div, else time out hide dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){ var _this = $(this); hide_dropdown = settimeout(function(){ _this.next('.dropdown-content').removeclass('show'); },50); }); $('.dropdown-content').hover( function(){ cleartimeout(hide_dropdown); }, function(){ $(this).removeclass('show'); } );
hope helps.
Comments
Post a Comment