我正在學(xué)習(xí)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}我想擁有的是,當(dāng)我單擊子項(即Home1 / home2 / home3)時,應(yīng)突出顯示父項(即Home).
我在選擇器選擇中做錯了.另外,也歡迎任何其他更好的解決方案.
謝謝.
更新：
抱歉,我原來的標(biāo)記是錯誤的.關(guān)閉子菜單理應(yīng)放在所有子菜單項之后.
現(xiàn)在這會改變所有的jQuery嗎？
感謝您的回答.
我非常感謝您提供一些解釋,以便我也了解自己在做錯什么.
UPDATE2：
更新我的標(biāo)記后,也像這樣的css
#nav .selected > a{background:red;display:block} 甚至我原來的解決方案都行得通.剛學(xué)了一些CSS和jQuery的東西.感謝大家.
帶有更新的標(biāo)記和CSS的更新小提琴和原始的jQuery在這里
http://jsfiddle.net/rZR2Y/26/
解決方法:
您的次級li元素選擇器不正確,應(yīng)為#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' ); }); });