jquery - 单击时更改父项颜色的子项

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;
});

演示

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小提琴

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 演示

Answer 3

其他方式：

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