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

-1

<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等匹配，但我无法弄清楚。一些新的脚本。谢谢。

我也需要做任何事情以确保每个链接和相应的输出相互排列？（悬停下的链接下方的输出）我试图使它像一个下拉菜单。

来源

2012-02-10 user1074378

这是因为$('.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

来源

2012-02-10 01:42:32 ShankarSangoli

一个问题是，它们会导致输出里，因为它们出现在列表中显示。我觉得这不太可能是代码的期望行为。用show（）和隐藏（），而不是改变可见样式

.output li {display:none;}

和文字：

$(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(); 
    }); 
});

来源

2012-02-10 01:53:25 Condiment

因此，要获得悬停工作，你会式 “.OUTPUT礼”

如果您根本无法更改标记，则需要使用.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）

来源

2012-02-10 01:55:28 nnnnnn

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

回答

相关问题