Question

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

感谢。

Answer 1

您正在尝试选择您想要选择的元素的父元素（我相信）：

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

Answer 2

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

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

jquery ul li第一个孩子改变颜色

2 个答案: