jquery run function when div obtains display:none;

Question

Hi there,

I have a dropdown menu that works via

#id ul li ul {
display: none;
}

#id ul li:hover ul {
display: block;
}

and this works fine except i have a li inside the shown ul (#id ul li ul li)

this ul has a .click jquery event assigned to it that,

when it is click it adds four anchor tags inside itself and replaces its content

so it goes from

() = li
[] = anchor
([Export])

to

([Export Draw 1]  
[Export Draw 2]  
[Export Draw 3]  
[Export Draw 4]  
[Export All]

this works fine, except

when the state changes from #id ul li:hover ul to #id ul li ul i need to change the content back to ([export])

i tried doing it on mouse leave of #export but it seems as if #export does not know its height as it is only the height of the single li

Answer 1

Use the handlerOut portion of jQuery's .hover() function (I.e. $(selector).hover(handlerIn, handlerOut)) to restore the content.

Answer 2

You can use the mouseleave event, like this:

$("#id ul li").mouseleave(function() {
  //code here to set those tags back
  //possibly: $(this).children('ul').html("<li>...</li>");
});

I'm not clear on your anchor code, but the event's the main thing here, just put in code there to replace the links in the reverse of what you'r currently doing and you're all set.