Question

im using a joomla 1.6.4 install and have a custom css/javascript drop-down menu in my theme. The main root element of the menu (ul) has an id of ‘topnav’. When the user clicks one of the (li) menu items, it changes to class to show it as selected and drops down a row of sub menus (a embedded in span). Before doing this it removes this class from all the other li elements using an iteration. This is working fine when i test it in a bare-minimum html page, however in Joomla, the drop down menu’s never dissapear, as if the style isn’t being changed. This code is definitely getting called when an li child is clicked:

function SetSelected(id)
{
    var obj = document.getElementById('topnav');
    for ( var count = 0; count < obj.childNodes.length; count++ )
    {
        if(obj.childNodes[count].nodeName.toLowerCase() == 'li')
        {
            $(obj.childNodes[count]).removeClass('clickedstate');   
        }
    }
    $(id).addClass('clickedstate');
    return;
}

According to jQuery’s hasClass method (and my stepping through code) it appears as if the class is getting removed, but the element doesn’t seem to update. Could joomla be interfering with this somehow?

Driving me insane!
Thanks

Answer 1

why dont you try to use

    $(obj).children().each(function (index) {
       if ($(this).nodeName.toLowerCase() == 'li')
       {
           $(this).removeClass('clickedstate');
       }
    });