Question

这是我想要制作的jquery下拉：http://jsfiddle.net/qYMq4/2/

基本上我只是想让一个div在用户鼠标悬停在一个链接上时停下来并保持向下，除非我鼠标离开链接或从掉落的div然后离开div。所以它几乎就像你在很多网站导航中看到的标准下拉菜单，但这只是有点动画，所以它不会立即出现。

我发现它非常困难，因为你可以看到它的功能不正常。任何adivce？感谢您的投入。

Answer 1

<强> You can see a working demo of the following here.

在这种情况下我更喜欢mouseenter ^[DOCS]和mouseleave ^DOCS，因为它在悬停时表现得更好儿童。我重新构建了HTML，以便悬停在链接的父div上，这样当您将鼠标悬停在向下滑动的灰色区域时，它不会被视为mouseleave，如下所示：

<div class="mask-layer">
    <a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
    <div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div>
</div>

然后，我重新构建了您的Javascript，以便将.mask-layer用于悬停事件，并使用slideUp ^[DOCS]和slideDown [DOCS] 如下：

$('.slidedown').hide();
$('div.mask-layer').mouseenter(function() { // enter animation
    $('.slidedown').slideDown(600);
}).mouseleave(function() {
    setTimeout(function() {
        $('.slidedown').slideUp(600);
    }, 200);
});

Answer 2

您可以使用slideDown()和slideUp()方法 - 它们更容易使用。您还需要使用windowSetTimeout。一个鲜为人知的功能是它返回一个允许您取消超时的数字。您可以使用它来在用户向下滚动div时保持div打开。从这里借鉴了这种方法的一些灵感：http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

$(document).ready(function() {
    $('.slidedown').hide();
    var timeout = 500;
    var closetimer = 0;

    $('a.top-link-cart, .slidedown').mouseover( function(){
        cancel_timer();
        $('.slidedown').slideDown(1000);
    });

    $('a.top-link-cart, .slidedown').mouseout( function(){
        closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout);
      });

function cancel_timer(){
 if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;
   }
 }
});

http://jsfiddle.net/P567S/7/

Answer 3

如果您正在寻找点击操作下拉菜单，那么

//toggle navbar on click.
$('//my link').click(function(event) {
event.stopPropagation();
$('//sub menu container').toggle();

});

//to close dropdown menu when clicked out it.
$(document).click(function() {
$('//sub menu container').hide();
});

希望它对你有用..... !!

Jquery下拉

3 个答案: