如何将鼠标悬停在一个列表的元素上并显示另一个列表的元素?
我有这样的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等匹配,但我无法弄清楚。一些新的脚本。谢谢。
我也需要做任何事情以确保每个链接和相应的输出相互排列? (悬停下的链接下方的输出)我试图使它像一个下拉菜单。
这是因为$('.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
一个问题是,它们会导致输出里,因为它们出现在列表中显示。我觉得这不太可能是代码的期望行为。用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();
});
});
因此,要获得悬停工作,你会式 “.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)