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

工作正常。当我悬停在顶级1时，会显示div class =“sub”但是我无法点击此div中的元素，因为悬停状态消失了。

我做错了什么？

格尔茨罗恩

Answer 1

将悬停更改为<li>而不是<a>链接。这意味着当您单击子菜单中的链接时，光标仍位于<li>的顶部。这样第二个悬停功能只有在您完全移出子菜单所在的列表元素时才会触发。

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

我假设上面的HTML是错误的，你的意思是将鼠标悬停在'顶级1'上，这应该是悬停函数在jQuery中启动的链接。

Answer 2

您的功能应如下所示：

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

当你离开<a> mouseleave事件时......这就是.hover()处理程序中的第二个处理程序，隐藏了兄弟姐妹。输入孩子时mouseleave 不会开火，因此在<li>上设置悬停事件意味着当您输入孩子<div>时他们不会触发/ <ul>元素。

应该保留jQuery hover（）和悬停状态

2 个答案: