Highlight Links On Navigation

I am trying to finish up my navigation for my site. I'm attaching the jsfiddle code to show you what code I have now. My problem is my child links become gray when they are suppo

Solution 1:

I redid your jQuery as it seemed overly complicated. Take a look at the result on this jsfiddle and let me know if that's what you were going for!

$("#nav > li").click(function () {
    if ( $(this).hasClass("selected") ) {
        $(".selected").removeClass("selected");
    } else {
        $(".selected").children("ul").slideToggle();
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    }
    $(".selected").children("ul").slideToggle();
});

http://jsfiddle.net/PBKxy/

Solution 2:

you can do it like this: http://jsfiddle.net/gUmYP/16/

$('#nav li a').each(function(){
            $(this).css('backgroundColor', '#006');
            $(this).css('color', '#CCC');
        });
        $(this).css('backgroundColor', '#ccc');
        $(this).css('color', '#066');

Solution 3:

i am pretty sure that your control logic that decides in which menu item will be re-colored at what time needs some review, therefore i only changed the code to actually change the colors below. here is the fiddle that demonstrates the effect hard-coded on menu item #2.

note that if location.pathname ends with a / you probably want refer to the element URL[URL.length-2] instead of URL[URL.length-1].

<script type="text/javascript">
    $('#body').ready(function(){
            var URL = location.pathname.split("/");

            URL = URL[URL.length-1];
            //<![CDATA[
            for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
                if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
                    $('#nav ul:visible').slideUp('normal');
                    $('#i'+i).slideDown(0);
                    $('#i'+i)
                        .find('li')
                        .each( function(idx, ex) {
                            var current = $(ex).find('a');
                            if (current.href == window.location.href) {
                                current.css({
                                      backgroundColor: '#ccc'
                                    , color:           '#006'
                                });
                                $('#i'+i).prev('a').css({
                                      backgroundColor: '#ccc'
                                    , color:           '#006'
                                });
                            }
                        });
                }
            }
        });
</script>