jquery - 如何将鼠标悬停在一个列表的元素上并显示另一个列表的元素？

Question

我有这个 HTML

<ul class="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>

<ul class="output">
<li>Content and output here 1</li>
<li>Content and output here 2</li>
<li>Content and output here 3</li>
</ul>

和这个 Javascript

 $(function(){

        $(".nav li").hover(function(){

            $(this).addClass("hover");
            $('.output li').css('visibility', 'visible');

        }, function(){

            $(this).removeClass("hover");
            $('.output li').css('visibility', 'hidden');

        });

    });

我试图让它在将鼠标悬停在链接 1 上显示输出 1 并将鼠标悬停在链接 2 上显示输出 2 等的情况下工作。但是现在我将鼠标悬停在哪个导航链接上并不重要，输出 1 始终显示。另外，我无法更改标记，因为我无权访问模板，我只能更改 CSS/JS。我认为我的脚本中遗漏了一些简单的东西，因此链接 1 与输出 1 匹配，链接 2 与输出 2 匹配，等等，但我无法弄清楚。脚本编写的新手。谢谢。

我还需要做些什么来确保每个链接和相应的输出相互对齐吗？ (悬停在链接下方的输出)我试图让它像一个下拉菜单。

Answer 1

因为 $('.output li').css('visibility', 'visible') 会选择 .output 里面的所有 li 元素，使他们可见。你必须基本上只使相应的 li 可见并隐藏所有其他的。检查我已修复的代码，并添加了注释以供您理解。

$(function(){
    $(".nav li").hover(function(){
        $(this).addClass("hover");
        $('.output li')
        .css('visibility', 'hidden')//Hide all the li's
        .eq($(this).index())//Get the li at same index which triggered hover
        .css('visibility', 'visible');//Make it visible
    }, function(){
        $(this).removeClass("hover");
        $('.output li').css('visibility', 'hidden');
    });

});

.index() 方法返回一个整数，指示第一个元素在 jQuery 对象中相对于其同级元素的位置。

.eq(index) 将匹配元素集缩减为指定索引处的元素。

工作 Demo