标签：menu css javascript jquery

我正在学习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

标签：menu,css,javascript,jquery
来源： https://codeday.me/bug/20191101/1986487.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。