0

我对 jquery 很陌生，并且在向下滑动和向上滑动事件时遇到 b/m 问题。

我有带有 5 个按钮的水平导航栏（作为列表项，例如运动、品牌等），它们本身被包裹在 id 为 shoppingNav 的 div 中。

我有一个带有 CSS 的下拉菜单display:none（带有 id 的 div submenu_bg）。

我想submenu_bg在鼠标悬停时向下滑动#shoppingNav并保持可见直到我从#shoppingNav. 我希望悬停时将单个按钮指向fadeIn不同的图标，但 submenu_bg 应该保持可见，直到我从导航栏（#shoppingNav）上的整个鼠标移出。

当前发生的情况是submenu_bg当从一个按钮悬停到另一个按钮时继续向下和向上滑动。

您可以在nike.com上查看我想要的效果。我无法弄清楚如何做到这一点。对此的任何帮助将不胜感激。

jQuery代码：

$(function(){
$('#shoppingNav').on('mouseover',function(){
    $('#submenu_bg').slideDown(200);
    });

$('#shoppingNav').on('mouseout',function(){
    $('#submenu_bg').stop().slideUp(200);
    });
});

<div id="shoppingNav">
        <ul>
        <li id="sports"><a href="#"></a></li>   
            <li id="brand"><a href="#"></a></li>                        
            <li id="clothing"><a href="#"></a> </li>                        
            <li id="footwear"><a href="#"></a></li>                         
            <li id="hotdeals"><a href="#"></a></li>
        </ul>
        <div id="submenu_bg"><img src="_images/submenu_bg1.png" alt="some background"/></div> 

</div>
4

2 回答 2

1

使用超时，然后在将鼠标悬停在新列表元素上时清除该超时，以免再次滑动子菜单：

$(function(){
    var timer;
    $('#shoppingNav').on({
        mouseenter: function(){
            clearTimeout(timer);
            if (!$('#submenu_bg').is(':visible'))
                $('#submenu_bg').slideDown(200);
        },
        mouseleave: function(){
            timer = setTimeout(function() {
                $('#submenu_bg').slideUp(200);
            }, 500);
        }
    });
});​

小提琴

于 2012-09-11T08:12:02.923 回答
0

这似乎与您包装事件处理程序的方式有关。

我玩弄了这个并设法让它在这里工作。

$('#shoppingNav').on('mouseover',function(){
  $('#submenu_bg').slideDown(200);
});

$('#shoppingNav').on('mouseout',function(){
  $('#submenu_bg').stop().slideUp(200);
});

​</p>

于 2012-09-11T08:12:37.547 回答