javascript-单击中突出显示或将类添加到父li元素

我正在学习jquery和CSS.
我有看起来像这样的菜单项.您可以在此处看到css,html,jquery http://jsfiddle.net/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}

我想拥有的是,当我单击子项(即Home1 / home2 / home3)时,应突出显示父项(即Home).

我在选择器选择中做错了.另外,也欢迎任何其他更好的解决方案.

谢谢.

更新：
抱歉,我原来的标记是错误的.关闭子菜单理应放在所有子菜单项之后.
现在这会改变所有的jQuery吗？

感谢您的回答.
我非常感谢您提供一些解释,以便我也了解自己在做错什么.

UPDATE2：
更新我的标记后,也像这样的css

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

甚至我原来的解决方案都行得通.刚学了一些CSS和jQuery的东西.感谢大家.
带有更新的标记和CSS的更新小提琴和原始的jQuery在这里
http://jsfiddle.net/rZR2Y/26/

解决方法:

您的次级li元素选择器不正确,应为#nav> ul> ul> .

尝试这个：

 $( 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

来源：https://www.icode9.com/content-1-542651.html