Question

我正在尝试根据正在悬停的子子菜单在导航菜单中为最近的父a:link切换CSS类。我可以让它适用于最近的父<li>标记，但不能用于我想要发生此事件的a:link。

HTML：

<ul class="menu">
  <li><a href="#">First Parent</a>
     <ul class="sub-menu">
          <li><a href="#">First Child</a></li>
          <li><a href="#">Second Child</a></li>
     </ul></li>
  <li><a href="#">Second Parent</a>
     <ul class="sub-menu">
          <li><a href="#">First Child</a></li>
          <li><a href="#">Second Child</a></li>
     </ul></li>
</ul>

因此，我编写的用于选择正在运行的父<li>的函数是：

$("ul.sub-menu").hover(function(){
        $(this).closest("li").toggleClass("parenthovered");
});

但是如何让这个班级切换a:link中父级的ul.menu li？类似的东西：

$("ul.sub-menu").hover(function(){
        $(this).closest("li a").toggleClass("parenthovered");
});

但那当然不起作用，我只是不确定我需要改变什么语法。

非常感谢SO。

Answer 1

您可以随时使用：

    $("ul.sub-menu").hover(function(){
            $("a", $(this).closest("li")).toggleClass("parenthovered");
    });

Answer 2

$("ul.sub-menu").hover(function(){
    $(this).siblings('a').toggleClass("parenthovered");
});

DEMO

Answer 3

您可以简单地find <a>内嵌<li>内嵌的$("ul.sub-menu").hover(function() { $(this).closest("li").find("a").toggleClass("parenthovered"); });。

{{1}}

Answer 4

使用find方法获取标记内的标记。

$("ul.sub-menu").hover(function(){
        $(this).closest("li").find("a").toggleClass("parenthovered");
});

JQuery选择最近的父a：链接

4 个答案: