我正在学习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' ); }); });
来源:https://www.icode9.com/content-1-542651.html
联系客服