To build a @accordion@ like navigfation menu I used the script ddaccordion by DynamicDrive. Alltogether a nice script, but somehow one feature is missing/not working.

My menu is expanding on mouseover and although there is always only one item expaneded thw whole menu will not collapse when I “mouseleave” the last menu entry. As the menu blends over half of my page it has to collapse. As I couldn’t find a solution anywhere I added 3 lines of code to the ddacordion.js script. Go to line 166 (app.) directly after:

1
2
3
4
5
6
7
8
9

$('.'+config["headerclass"]).bind(config.revealtype, function(){
	if (config.revealtype=="mouseenter"){
		ddaccordion.expandone(config["headerclass"], parseInt($(this).attr("headerindex")))
	}
	else{
		$(this).trigger("evt_accordion")
		return false //cancel default click behavior
	}
})

Add the following lines:

1
2
3
4

if (config.revealtype=="mouseenter"){
$('.'+config["headerclass"]).bind("mouseleave", function(){
	ddaccordion.collapseone(config["headerclass"], parseInt($(this).attr("headerindex")))
})}

That’s all, please report your experience…

Tags: javascript