jQuery hover()和hover状态应保持不变

Question

我是jQuery的新手，我尝试了这样的东西：

   <ul id="CatNavi">
  <li class="CatLevel1 SubMenue">Top Level 1
    <div class="sub">
      <ul>
         <li class="CatLevel2">Sub Level 1</li>
         <li class="CatLevel2">Sub Level 1</li>
      </ul>
    </div>
  </li>
</ul>

jquery看起来像这样：

   $(function() { 
 $("li.CatLevel1 a").hover(function() {
   $(this).next("div.sub").slideDown(500);
 },function() {
  $(this).next("div.sub").slideUp(200);
 });
});

它工作得很好。当我悬停在Top Level 1上时，显示了div class="sub“，但我不能单击这个div中的元素，因为悬停状态消失了。

我做错了什么？

Greetz Ron

Answer 1

您的函数应如下所示：

$(function() { 
  $("#CatNavi li.CatLevel1").hover(function() {
    $(this).children("div.sub").slideDown(500);
  },function() {
    $(this).children("div.sub").slideUp(200);
  });
});

当您移出<a>时，mouseleave事件fires...which就是该.hover()处理程序中的第二个处理程序，它隐藏了兄弟处理程序。mouseleave不会在输入子元素时触发，因此将悬停事件放在<li>上意味着它们不会在您输入子<div>/<ul>元素时触发。

Answer 2

将鼠标悬停更改为在<li> not <a>链接上工作。这意味着当您单击子菜单中的链接时，光标仍然位于<li>的顶部。这样，第二个悬停函数只有在您完全移出列表元素时才会触发，子菜单就在列表元素中。

$("li.CatLevel1").hover( /* hover code here */ )

我假设上面的超文本标记语言是错误的，你的意思是悬停在“顶级1”上，这应该是悬停功能在jQuery中发挥作用的一个链接。