JQuery accordion menu problem in IE8

JQuery accordion menu problem in IE8

Hi all.

I'm new to jquery and javascript, and I'm doing a site with a drop-down accordion menu. It actually has two drop-down menus on the page, a horizontal one along the top, and a vertical side menu.

(For the record, I'm using the accordion menu found here:  http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi)

The default menu code uses a .click() event on a "li" to initiate .slideToggle and .slideUp actions. This is fine for the side menu, but the top menu requires a mouse roll-over event to trigger the sliding. 

Not really knowing what to do, I duplicated the code for the .click menu, and changed .click to .mouseover for the top menu. This worked fine in Firefox and Chrome, but in IE7 & 8 I got an "Exception thrown and not caught error" whenever I moused over one of the sub menu items in the .click sliding menu.

I read up on this issue, and found this page:  http://jquery-howto.blogspot.com/2009/04/problems-with-jquery-mouseover-mouseout.html. That post says, " mouseover and mouseout events do not bubble from child to parent element." Now, I'm not entirely sure what this means, but changing .mouseover to .mouseenter resolved the error whenever I rolled over the .click sub-menu items in IE.

But the problem persists when I actually click on the sub-menu items to go to their pages. Now I'm still getting the "Exception thrown and not caught error" as well as an "Object doesn't support this property or method" error.

The second error points to: if($('#' + parent).hasClass('noaccordion')) {

I've attached the menu.js file I'm using here. If anyone can help, I'd be really grateful. I'm truly stumped.

Thanks!

Here's the full code:

function initMenuSide() {
$('ul.#menu ul').hide();
$.each($('ul.#menu'), function(){
$('#' + this.id + '.expandfirst ul:first').show();
});
$('ul.#menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;

if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
} 
);
}
function initMenuTop() {
$('ul.#menuTop ul').hide();
$.each($('ul.#menuTop'), function(){
$('#' + this.id + '.expandfirst ul:first').show();
});
$('ul.#menuTop li a').mouseenter(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;

if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
} 
); 
}
$(document).ready(function() {initMenuSide();});
$(document).ready(function() {initMenuTop();});