0

我正在制作一个快速的动画下拉菜单。当您使用初始按钮时mouseover，我的效果很好。mouseout当您将鼠标悬停在下拉列表本身时，我只是无法获得下拉到“保持”的 HTML div。这是我正在做的事情：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/

4

1 回答 1

3

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

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

于 2013-09-12T22:22:24.163 回答