Question

Hi I have a header with a menu to its side, right now the menu gets displayed by dropping down once I hove on the arrow on the side of header and disappears once I move my cursor out of the menu dropdown area.

How do I make the menu stay until I click like the arrow button on the top again or have a button in the menu like ‘ok’ which will slide up the menu?

Answer 1

Use the mousenter event to show the menu. Then use the click event of another element to hide the contents. Without your html/css it is a crapshoot determining the exact selectors and code that should be used.

http://jsfiddle.net/4Jn6q/

<div id="a">
    <span>X</span>
    <div>Some content to show</div>
</div>

 

$('#a').mouseenter(function() {
    $(this).children().slideDown();
});

$('span').click(function() {
    $(this).parent().children().slideUp();
});