javascript - 悬停时保持下拉菜单打开 jQuery

Question

我正在制作一个快速的动画下拉菜单。当您在初始按钮上鼠标悬停和mouseout时，它工作得很好。当您将鼠标悬停在下拉菜单本身上时，我无法让 HTML div 下拉到“保持”状态。这是我正在做的事情的 fiddle :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”上时尝试使其不执行任何操作。

很难解释清楚。抱歉，我希望我说得有道理。任何帮助都是极好的!这是我的 fiddle :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);
});

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