Fiddle

Question

我有一个导航菜单，当我将鼠标悬停在链接上时，我想显示每个链接子菜单，然后切换或隐藏并显示每个链接子菜单。

当我将鼠标悬停在导航菜单上的链接上时，它会显示所有链接的所有子菜单。

到目前为止，我附上了一个关于我的代码演示的小提琴： -

这是jQuery

$(document).ready(function() {
    $("li.navmain__item").hover(function () {
            $("span.navmain__item--subnavholder").toggle();
        })
})

由于

Answer 1

使用：

$(document).ready(function() {
    $("li.navmain__item").hover(function () {
        $(this).children("span.navmain__item--subnavholder").toggle();
    });
});

Fiddle

Answer 2

试试这个：

$(document).ready(function() {
    $("li.navmain__item a").hover(function () {
        $(this).siblings().toggle();
    })
})

Answer 3

您必须定位特定子菜单。在hover()处理程序内，使用：

$("span.navmain__item--subnavholder", this.parentElement).toggle();

Answer 4

您只需要获取您正在悬停的元素的subnavholder。在回调中，您悬停的元素存储在this中（作为HTML元素）。

更改

$("span.navmain__item--subnavholder").toggle();

到

$(this).parent().find("span.navmain__item--subnavholder").toggle();

会做的伎俩！

Answer 5

在您当前的设置中，应该这样做

$(document).ready(function() {
            $("li.navmain__item").hover(function () {
                $(this).find(".navmain__item--subnavholder").toggle();
            })
        })

Answer 6

您还可以为脚本添加索引。这是编辑，工作jssfiddle：http://jsfiddle.net/QTm2c/8/

$(document).ready(function() {
        $("li.navmain__item a").hover(function () {
            var index = $( "li.navmain__item a" ).index( this );
            $("span.navmain__item--subnavholder"+index).toggle();
        })
    })

jQuery on hover显示导航菜单上的子链接

6 个答案:

Fiddle