Question

我正在制作快速动画下拉菜单。当您在初始按钮上mouseover和mouseout时，我的工作效果非常好。当你徘徊在下拉列表本身时，我不能让HTML div下降到“hold”。这是我正在做的事情的小提琴：http://jsfiddle.net/kAhNd/

这是我在JS中所做的事情：

$('.navBarClickOrHover').mouseover(function () {
    var targetDropDown = $(this).attr('targetDropDown');
    var targetDropDownHeight = $('#' + targetDropDown).height();
    $('#' + targetDropDown).animate({
        'height': '200px'
    });
}).mouseout(function () {
    if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {

    } else {
        var targetDropDown = $(this).attr('targetDropDown');
        var targetDropDownHeight = $('#' + targetDropDown).height();
        $('#' + targetDropDown).animate({
            'height': '0px'
        });
    }
});

它可以工作，但是当你的鼠标悬停在它上面时，元素不会停留下来。我加入了

if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {

    }

当你徘徊在'。dropdownCont'上时，

试图让它什么都不做。

很难解释它。对不起，我希望我有道理。任何帮助都是极好的！这是我的小提琴：http://jsfiddle.net/kAhNd/

Answer 1

以下是您的代码转换http://jsfiddle.net/krasimir/kAhNd/3/

var button = $('.navBarClickOrHover');
var isItOverTheDropdown = false;
var showDropDown = function() {
    var targetDropDown = $('#' + button.attr('targetDropDown'));
    var targetDropDownHeight = targetDropDown.height();
    targetDropDown.animate({
        'height': '200px'
    });
    targetDropDown.off("mouseenter").on("mouseenter", function() {
        isItOverTheDropdown = true;
    });
    targetDropDown.off("mouseleave").on("mouseleave", function() {
        isItOverTheDropdown = false;
        hideDropDown();
    });
}
var hideDropDown = function() {
    var targetDropDown = $('#' + button.attr('targetDropDown'));
    var targetDropDownHeight = targetDropDown.height();
    targetDropDown.animate({
        'height': '0px'
    });
}

$('.navBarClickOrHover').mouseover(function () {
    showDropDown();
}).mouseout(function () {
    setTimeout(function() {
        !isItOverTheDropdown ? hideDropDown : '';
    }, 500);
});

我想这就是你想要实现的目标。

在悬停jQuery时保持下拉列表打开

1 个答案: