Question

所以基本上我试图在将鼠标悬停在子菜单元素上时保持向下箭头的顶级类别图像。我想通过jQuery在悬停函数上做到这一点但是我不能为我的生活得到一个选择器来定位子菜单项。

以下是我尝试运行的代码：

$(document).ready(function() {
    $('.sub ul > li').hover(function() {
        $(this).parents('a.sub').attr('src', 'images/DownArrow.png');
},
function(){
     $(this).parents('a.sub').attr('src', 'images/DownArrowOff.png');
   }); 
});

在此下拉菜单中：

http://www.seth-duncan.com/Test/TestMenu.html

但正如我所说，我无法找出选择器来定位这些子菜单项，所以我可以更改图像的src。

这必须通过jQuery而不是通过CSS完成（相信我，我知道它有效，但不是我必须完成这项任务的方式）

感谢您的帮助。

-Seth

Answer 1

我认为图像是动态添加的事实干扰了jQuery发现它们。除非你将事件与live()绑定在一起，否则我认为它们会被遗漏。

那就是说，这就是我如何让它发挥作用。

$(document).ready(function(){
    var downArrow    = '/Test/images/DownArrow.png';
    var downArrowOff = '/Test/images/DownArrowOff.png';

    $("#menu li a.sub").hover(function () {
        $(this).find('img').attr('src',downArrow);
    }, function () {
        $(this).find('img').attr('src',downArrowOff);
    });
    $("#menu li ul").hover(function () {
        $(this).parents('li:has(a)').children('a.sub').find('img').attr('src', downArrow);
    }, function () {
        $(this).parents('li:has(a)').children('a.sub').find('img').attr('src', downArrowOff);
    });
});

Answer 2

问题出在您使用的选择器上，以便使用li来悬停。你的$（'。sub ul＆gt; li'）的选择器正在一个带有sub类的元素中寻找一个ul元素。你的ul元素实际上是class sub的兄弟。将您的选择器更改为$（'。sub~ul＆gt; li'），这将正确定位您的所有li。

现在，使用artlung发布的内容，您的选择器备份箭头图像应如下所示：

$(this).parents('li:has(a)').children('a.sub').find('img')

到达图像后，您可以随意更改属性。

无法弄清楚jQuery选择器

2 个答案: