элементы для детей при нажатии изменить родительский цвет

Question

У меня есть меню с несколькими ul элементами. Я хочу изменить цвет текста верхнего меню на красный.

Однако это работает только тогда, когда я нажимаю в первом элементе, а не в элементах для детей.

Например, я хочу нажать hydrotherapy и перейти на красную кнопку. Services. Родитель. Есть идеи?

$("nav.menu>ul>li").children().click(function() { 
    alert("asd"); 
    var item1 = $(this), 
     primeira_ul = item1.closest('.menu>ul#nav>li>a.t2'); 

    item1.addClass('font_red'); 
    return false; 
}); 

demo

Answer 1

Вы можете найти первого ребенка $(this), который является тегом a. Обратите внимание, что $(this) относится не к источнику события, а к элементу $("nav.menu>ul>li"), который уже является вашим высшим уровнем li.

Возможно, вы также захотите освободить братьев и сестер.

$("nav.menu>ul>li").on("click", function() { 
    var item1 = $(this), 
     primeira_ul = item1.closest('.menu>ul#nav>li>a.t2'); 

    $(this).siblings().find("> a").removeClass('font_red'); 
    $(this).find("> a").first().addClass('font_red'); 
    return false; 
}); 

JS Fiddle

Answer 2

Один из возможных способов состоят в поиск ближайшего ul.first_level в первом раунде, а затем использовать .siblings(), чтобы получить сам ссылку (не делая серьезные изменений в коде, просто меняются части с проблемой):

$("nav.menu>ul>li").children().click(function() { 
    var item1 = $(this); 
    var theLink = item1.closest('.first_level').siblings('.t2'); 

    theLink.addClass('font_red'); 
    return false; 
});​ 

jsFiddle Demo

Answer 3

Другой способ:

$("nav.menu>ul>li").children().click(function(e) { 
    e.preventDefault(); 
    $(this).parents('#nav>li:has(.t2)').find('>a').addClass('font_red'); 
});​