I am learning jquery and css. I have menu items which look like this. You can see css,html, jquery here /

html
<div id="nav"> 
    <ul>    
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Home1</a></li>
                <li><a href="#">Home2</a></li>
                <li><a href="#">Home3</a></li>
            </ul>
        </li>
        <li><a href="#">Blog</a>
            <ul>
                <li><a href="#">Blog1</a></li>
                <li><a href="#">Blog2</a></li>
                <li><a href="#">Blog3</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
    </ul>
</div>

jquery
$( document ).ready( function() {
   $( '#nav > ul > li' ).click( function() {
      $( '#nav > ul' ).children('li').removeClass();
      $( this ).addClass( 'selected' );
   });
   $( '#nav > ul > li > ul > li' ).click( function() {
      $( '#nav > ul' ).children('li').removeClass();
      $( this ).parent('li').addClass( 'selected' );
   });
});

css
    #nav .selected a{background:red;display:block}

What I would like to have is, when I click sub li items ie Home1/home2/home3, then parent li ie Home should be highlighted.

I am doing something wrong in selector selection. Also, any other better solutions are also wele.

Thanks.

UPDATE: I am sorry, my original markup was wrong. Closing sub li should naturally e after all submenu items. Does this now change all jquery ?

Thanks for your answers. I would very much appreciate some explanation, so that I also learn what I am doing wrong.

UPDATE2: After updating my markup, and also css like this

    #nav .selected  > a{background:red;display:block} 

even my original solution works. Just learnt few css and jquery stuffs. Thanks everyone. Updated fiddle with updated markup and css and original jquery is here /

I am learning jquery and css. I have menu items which look like this. You can see css,html, jquery here http://jsfiddle/rZR2Y/

html
<div id="nav"> 
    <ul>    
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Home1</a></li>
                <li><a href="#">Home2</a></li>
                <li><a href="#">Home3</a></li>
            </ul>
        </li>
        <li><a href="#">Blog</a>
            <ul>
                <li><a href="#">Blog1</a></li>
                <li><a href="#">Blog2</a></li>
                <li><a href="#">Blog3</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
    </ul>
</div>

jquery
$( document ).ready( function() {
   $( '#nav > ul > li' ).click( function() {
      $( '#nav > ul' ).children('li').removeClass();
      $( this ).addClass( 'selected' );
   });
   $( '#nav > ul > li > ul > li' ).click( function() {
      $( '#nav > ul' ).children('li').removeClass();
      $( this ).parent('li').addClass( 'selected' );
   });
});

css
    #nav .selected a{background:red;display:block}

What I would like to have is, when I click sub li items ie Home1/home2/home3, then parent li ie Home should be highlighted.

I am doing something wrong in selector selection. Also, any other better solutions are also wele.

Thanks.

UPDATE: I am sorry, my original markup was wrong. Closing sub li should naturally e after all submenu items. Does this now change all jquery ?

Thanks for your answers. I would very much appreciate some explanation, so that I also learn what I am doing wrong.

UPDATE2: After updating my markup, and also css like this

    #nav .selected  > a{background:red;display:block} 

even my original solution works. Just learnt few css and jquery stuffs. Thanks everyone. Updated fiddle with updated markup and css and original jquery is here http://jsfiddle/rZR2Y/26/

• javascript
• jquery
• css
• menu

• @Yoshi I have now added all code here. – newcoderintown Commented Jan 13, 2012 at 10:36
• 1 On a side note: Your markup is incorrect. The closing <li>s should e after the nested <ul>s. ;) – Yoshi Commented Jan 13, 2012 at 10:46
• Oh, yes I show that one now. Now when I change as you said, then my whole query selection is changed. – newcoderintown Commented Jan 13, 2012 at 10:52
• Could be that selectors needed changing. But in general I think your selectors are to plicated for such a simple task. (I added an answer using only simple selectors) – Yoshi Commented Jan 13, 2012 at 11:00

3 Answers 3

Your selector for sub-level li elements was incorrect, it should be #nav > ul > ul > li.

Try this:

 $( document ).ready( function() {
     $( '#nav > ul > li' ).click( function() {
         $( '#nav > ul' ).children('li').removeClass();
         $( this ).addClass( 'selected' );
     });
     $( '#nav > ul > ul > li' ).click( function() {
         $( '#nav > ul' ).children('li').removeClass();
         $( this ).parent('ul').prev().addClass( 'selected' );
     });
 });

Example fiddle

Given your code, you could use:

$('#nav').on('click', 'li', function () {
  $('#nav li').removeClass('selected');
  $(this).parentsUntil('#nav', 'li').add(this).addClass('selected');
  return false;
});

Though I have my doubts that this is what you're looking for. Maybe try also changing your css to:

#nav .selected > a{background:red;display:block}

demo: http://jsfiddle/F8dbG/2/

updated using a the additional selector for on to reduce number of event bindings. (thanks @diEcho)

You could do

 $( document ).ready( function() {
     $( 'li' ).click( function() {
         $( 'li').removeClass('selected' );
         var $this = $( this );
         $this.addClass( 'selected' );
         $this.parent().prev().addClass( 'selected' );
     });
 });

fiddle here http://jsfiddle/rZR2Y/22/