0

HTML：

<ul class="navigate">  
<li>  
    <a title="Demo01" href="###">Demo01</a>  
    <ol>  
        <li><a title="Demo01Children01" href="###">Demo01Children01</a></li>  
        <li><a title="Demo01Children02" href="###">Demo01Children01</a></li>  
    </ol>  
</li>  
<li><a title="Demo02" href="###">Demo02</a></li>  
</ul>

Javascript：

$("ul.navigate>li").mouseenter(function(){  
  $(this).children("a").slideDown();  
  console.log("hover");  
}).mouseleave(function(){   
  $(this).children("a").slideUp();  
  console.log("out");  
});

在firefox中运行html和JS，每次鼠标悬停时，我在firefox firebug中看到输出是“hover，out，hover”。实际上，仅输出“悬停”不是我的目的。任何人都可以帮助我解决问题吗？

4

3 回答 3

1

我认为你得到闪烁的原因是因为它li包含一个要点。当您从左侧输入时，您点击项目符号点（触发器in），然后是空格（触发器out），然后是文本本身（in再次触发器）。

如果将以下 CSS 添加到演示中：

li{
   list-style-type: none;
}

你发现行为消失了吗？

另一方面：在移动（滑动）元素上添加“悬停”行为可能是一个非常糟糕的主意！

Codepen 在这里进行演示。

于 2013-10-22T10:47:19.233 回答
0

您遇到了问题，因为您正在滑动元素，这会再次快速调用事件！看看这个jsfiddle，我在其中注释掉了下滑行。

我建议你告诉我们你是如何让你的代码工作的（是否需要滑动？），然后我们可以找到一个解决方案。

基本上我将您的代码更改为：

$("ul.navigate>li").mouseenter(function()
{  
    //$(this).children("a").slideDown();  
    console.log("hover");  
}).mouseleave(function()
{   
   //$(this).children("a").slideUp();  
   console.log("out");  
});
于 2013-10-22T10:47:06.413 回答
0

在不更改您的标记的情况下，我稍微修改了您的 javascript，使其看起来像这样：

$("ul.navigate > li").mouseenter(function(){  
    $(this).find("li").slideDown();  
    console.log("hover");  
}).mouseleave(function(){   
    $(this).find("li").slideUp();  
    console.log("out");  
});

一个建议，我也适用display: none于儿童菜单

演示：http: //jsfiddle.net/C2nVz/1/

注意：该演示还包括list-style-type: none，正如 Ed 所建议的，它会导致多个mouseover和mouseleave事件。

于 2013-10-22T10:38:47.347 回答