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

Keep dropdown open on hover jQuery

本文关键字：下拉列表 悬停 jQuery      更新时间：2023-09-26

我正在制作一个快速的动画下拉菜单。当您mouseover并mouseout初始按钮时，我让它工作得很好。我只是无法获得当您将鼠标悬停在下拉列表本身上时下拉到"保持"的 HTMLdiv。这是我正在做的事情的小提琴：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/

这是您的代码转换 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);
});

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

相关文章：