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并隐藏所有其他的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

Answer 2

如果您根本无法更改标记，则需要使用.index()方法找出悬停元素的索引，然后将其与您想要的元素的索引相关联秀。

请注意，如果您尝试制作下拉菜单效果，则在将鼠标从主菜单项移开时不想隐藏输出部分，否则您将无法点击子菜单。

考虑到这一点，这几乎与a question I answered a few days ago中的要求相同。这是我为该问题发布的代码版本，在您停止在主菜单上停留后，子菜单会暂时保留，以便您有时间将鼠标移动到子菜单上，然后才会消失：

var timerId,
    $mainMenuItems = $(".nav li"),
    $subMenus = $(".output li");

$mainMenuItems.hover(
    function(){
        clearTimeout(timerId);
        $subMenus.hide();
        $($subMenus[$mainMenuItems.index(this)]).hide()
                                                .removeClass('hidden')
                                                .show();
    }, function(){
        var i = $mainMenuItems.index(this);
        timerId = setTimeout(function(){$($subMenus[i]).hide();},500);
    }
);
$subMenus.hover(
    function() {
       clearTimeout(timerId);
    },
    function() {
       $(this).hide();
    }
);

工作演示：http://jsfiddle.net/4mgXh/

我没有明确设置visibility属性，而是使用.hide()和.show()。

（我意识到这超出了你的要求，但我认为这将解决你的下一个问题，而且我也不会费力地将超时内容从代码中拉出来。有关代码如何工作的更详细解释在my other answer）

Answer 3

我注意到其他方法的一个问题是它们会导致输出li显示在列表中。我发现这不太可能是代码的理想行为。

所以为了让悬停工作，你会设置“.output li”：

.output li {display:none;}

脚本使用show（）和hide（）而不是更改可见性样式：

$(function(){
    $('.nav li').hover(function(){
        $(this).addClass('hover');
        var linkId = $(this).index();
        $($('.output li')[linkId]).show();
    }, function () {
        $(this).removeClass('hover');
        var linkId = $(this).index();
        $($('.output li')[linkId]).hide();
    });
});

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

3 个答案: