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

单击子项时更改父颜色

3 个答案: