jQuery - IE6,7 not suporting $(this) ?

Question

Hey, I have a code, that works in all modern browsers, but not in IE 6,7.

$('.cat1').toggle(function() {

    $(this).parent('li').next('ul').slideUp(); 
    $(this).css('background-position', '0px 0px');

    return false;

}, function() {

    $(this).parent('li').next('ul').slideDown(); 
    $(this).css('background-position', '-210px 0px');

    return false;

});

It does the background-position change, but not the slideUp or slideDown, any idea why?

I thought it's because of the $(this), but I'm not sure, and if yes, is there a way to make it work?

Edit: Seems the problem might be in the 'next()' function.

Answer 1

Obviously, $(this) works or the background-position wouldn't change either. I suspect it has something to do with which elements are being selected, or rather not selected. I suggest (since it's IE) that you break the selection down and do a few alerts to figure out which elements are actually being selected. Perhaps IE is inserting some extra element in the DOM between the element you are clicking on and the list element that you think should be it's parent. If that's the case, changing to use closest('li') would be a way of navigating back up through the tree to get the containing list element.

Answer 2

This can be simply addressed by using the noConflict in jQuery. This is a link to the jQuery Docs that explains it: http://docs.jquery.com/Core/jQuery.noConflict