jQuery悬停（）和悬停状态应保持

发布于 2024-09-29 17:04:37 字数 685 浏览 1 评论 0原文

我是 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 中的元素，因为悬停状态消失了。

我做错了什么？

格瑞兹罗恩

原文

I'm new to jQuery and I try something like this:

   <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>

And the jquery looks like this:

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

It works fine. When I hover the Top Level 1 the div class="sub" is shown but I can't click the elements in this div because the hover state disappears.

What am I doing wrong?

Greetz
Ron

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沒落の蓅哖 2024-10-06 17:04:37

您的函数应如下所示：

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

当您离开时，mouseleave 事件会触发...这就是 .hover() 处理程序是隐藏同级的。 mouseleave 不会在进入子级时触发，因此将悬停事件放在

上意味着它们在进入子级时不会触发您输入子

Your function should look like this:

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

When you move off the <a> the mouseleave event fires...which is what the second handler in that .hover() handler is, hiding the siblings. mouseleave doesn't fire when entering a child, so having the hover events on the <li> instead means they won't fire when you enter the child <div>/<ul> elements.

回复收藏 0 原文

狼性发作 2024-10-06 17:04:37

将悬停更改为在

而非链接上工作。这意味着当您单击子菜单中的链接时，光标仍位于

顶部。这样，第二个悬停函数仅在您完全移出子菜单所在的列表元素时才会触发。

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

我假设上面的 HTML 是错误的，您的意思是悬停在“Top Level 1”上，这应该是在 jQuery 中启动悬停功能的链接。

Change the hover to work on the <li> not <a> link. This means the cursor is still on top of the <li> while you click on the link in the submenu. That way the second hover function only fires when you completely move off the list element, which the submenu is inside.

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

I'm assuming the above HTML is wrong and you mean hovering over the 'Top Level 1', which should be a link for the hover function to kick in in the jQuery.

回复收藏 0 原文

~没有更多了~