jquery ul li первый ребенок меняет цвет

Question

Я работаю над простым меню, щелкаю каждое верхнее меню, открываю подменю и устанавливаю другой цвет фона для первого ребенка.

Код здесь: http://jsfiddle.net/X3Dey/

Спасибо.

1008 *

Answer 1

Вы пытаетесь выбрать родительский элемент элемента, который вы на самом деле хотите выбрать (я верю):

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

Должен измениться на (обратите внимание, что я создаю цепочку вызовов функций вместо создания совершенно новогоselection):

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