Question

我正在尝试创建侧边栏导航菜单，当您将鼠标悬停在元素上时，会显示某个div。

HTML看起来像：

<ul id="nav">
    <li id="item1">Item1</li>
    <li id="item2">Item2</li>
    <li id="item3">Item3</li>
</ul>

<div id="item1_content">
   blah1
</div>
<div id="item2_content">
   blah2
</div>
<div id="item3_content">
   blah3
</div>

jQuery看起来像：

$(document).ready(function() {
 //hides all content at load
 $("#item1_content").hide();
 $("#item2_content").hide();
 $("#item3_content").hide();


 //when item 1 hovered over, hide all else and display item 1 content
 $("#item1").hover(function(){
    $("#item2_content").hide(),
    $("#item3_content").hide(),
    $("#item1_content").fadeIn("fast");
 });
 $("#item2").hover(function(){
    $("#item3_content").hide(),
    $("#item1_content").hide(),
    $("#item2_content").fadeIn("fast");
 });
 $("#item3").hover(function(){
    $("#item2_content").hide(),
    $("#item1_content").hide(),
    $("#item3_content").fadeIn("fast");
 });

然而，虽然这可以缓慢地悬停在元素上，但是当您快速浏览它们时，它似乎不会隐藏所有文本。我是jQuery的初学者，我确信这是最有效的方法。如何才能获得一个不会错误的漂亮悬停效果，以及如何使我的代码更高效？（特别是使用类）

谢谢。

Answer 1

我一直未能发现它没有消失，但由于衰退很快，也许只是我找不到它。我发现的是，元素的消失时间并没有消失。这是因为当它们仍在淡入时它们被隐藏。要解决这个问题，你需要调用stop(true, true)来停止任何正在进行的动画并在你隐藏之前跳到它的末尾。

我对你的DOM做了一些修改，使用类来识别，而不是ID。

<ul id="nav">
    <li id="item1">Item1</li>
    <li id="item2">Item2</li>
    <li id="item3">Item3</li>
</ul>

<div class="item1 content">
    blah1
</div>
<div class="item2 content">
    blah2
</div>
<div class="item3 content">
    blah3
</div>

我要改变的一件事是添加一个样式.content { display: none; }，而不是在DOMReady上调用$('.content').hide();，因为这可能会导致项目在页面加载期间闪烁。

既然他们是班级，我们可以将其减少为一种方法：

$(function() {
    $("#nav li").mouseover(function(){
       $(".content").stop(true, true).hide(),
       $("." + $(this).attr('id')).fadeIn("fast");
    });
});

我将hover更改为mouseover，因为悬停触发两次（鼠标悬停一次，鼠标悬停一次），这似乎不是您想要的。

鼠标悬停回调中的第二个选择器正在查找与当前项目的ID具有相同类别的任何项目。因此，将鼠标悬停在#item3上会查找.item3。

jQuery toggle buggy

1 个答案: