Sidebar submenu items that do not show / hide as they should

Question

I am trying to create a simple sidebar for my site using jquery and I am having problems with the functionality of the hang. When a user hovers over a category, a submenu should appear. I would like the submenu to close if the category above or below hangs. I created jsFiddle to show my problem and how the submenu does not close as it should. I tried to figure this out for several hours, I would really appreciate any help on this.

http://jsfiddle.net/BGcDc/7/

thanks.

Answer 1

You forgot to hide your submenu in the mouseleave function. Just add $(this).find(".submenu").hide(); to an existing handler:

 $(".category").mouseleave(function() { $(this).find(".submenu").hide(); $(this).css("background-color", "#eee"); $(this).css("border", "1px solid grey"); $(this).css("border-bottom", "none"); $(this).css("width", "180px"); $(".category:last").css("border-bottom", "1px solid grey"); }); 

Answer 2

http://jsfiddle.net/ahren/BGcDc/8/

Just add $(".submenu").hide(); at the beginning of the guidance.

Answer 3

you forgot to hide the list

 $(".category").mouseleave(function() { $(this).find(".submenu").hide(); }) 

http://jsfiddle.net/BGcDc/10/

but this can be done with css only test .. by:

 .category .submenu{ display:none} .category:hover .submenu{ display:block} 

And generate all your .css () borders that you got there (and makes more sense, it would be wise if you want the cross-browser animation to show / hide)

Answer 4

Just change your javascript like this:

 $(".category").mouseleave(function() { // add this $(".submenu").hide(); $(this).css("background-color", "#eee"); $(this).css("border", "1px solid grey"); $(this).css("border-bottom", "none"); $(this).css("width", "180px"); $(".category:last").css("border-bottom", "1px solid grey"); }); 

Answer 5

.hover() The jQuery method takes 2 parameters, you can use an anonymous function object in the second parameter to hide the submenu in the same way as you show it in the function of the 1st parameter.

Fiddle

mouseleave also not required if you already have a .hover listener attached to the elements. It is also simpler and easier to read.

Fiddle