jquery ul li第一孩子换颜色

问题描述：

我正在为一个简单的菜单工作，点击每个顶层菜单，打开子菜单，并设置第一个孩子不同的背景颜色。jquery ul li第一孩子换颜色

感谢。

那么你的问题到底是什么？ – 2012-02-11 01:07:17

@MMC，请参阅'jsfiddle'，我要点击顶层菜单，显示子菜单，然后第一个子菜单将bg颜色更改为'＃e9aa9e'。 – Giberno 2012-02-11 01:09:38

答

$(this).children('.sub-menu-wrap').children().first().css('background','#e9aa9e');

你去那里http://jsfiddle.net/X3Dey/6/

答

你尝试选择你真正要选择的元素的父元素（我相信）：

$(this).children('.sub-menu-wrap').css('display','block'); 
$(this).children('.sub-menu-wrap:first-child').css('background','#e9aa9e');

应该改变（注意我链接函数调用，而不是创建一个全新的选择）：

$(this).children('.sub-menu-wrap').css('display','block').children().first().css('background','#e9aa9e');

:first-child伪选择器过滤它应用到的元素，而不是他们的子元素，你必须明确地选择子元素，然后限制到第一个元素。

这里是一个演示：http://jsfiddle.net/X3Dey/4/

您可以通过使用更少的选择，链接在可能的情况，以及使用DOM遍历函数而不是字符串伪选择优化代码：

$('.menu').click(function(){ 

    //reset all menu items 
    $('.sub-menu-wrap').css('display','none').children().css('background','d2ff2d'); 

    //now run the code on the selected menu items 
    $(this).children('.sub-menu-wrap').css('display','block').children().first().css('background','#e9aa9e'); 
});

这里是一个此代码的演示：http://jsfiddle.net/X3Dey/5/

jquery ul li第一孩子换颜色

相关推荐