悬停时的jQuery Dropdown行为

Question

使此下拉列表无法正常运行有些困难。 将鼠标悬停在下拉的元素上时，它应保持打开状态。 我做了一个函数，每半秒检查一次鼠标是否悬停在该元素上，如果是，则不执行任何操作，如果不是，则关闭下拉菜单。 这是我的小提琴，明白我的意思： http : //jsfiddle.net/KyCyB/

这是我的JS：

$('.navBarClickOrHover').mouseover(function () {
    var targetDrop = $(this).attr('targetDropDown');
    if ($('.dropdownCont[isOpen="true"]').length != 0) {
        $('.dropdownCont[isOpen="true"]').attr('isOpen', 'false');
        $('.dropdownCont[isOpen="true"]').animate({
            "height": "0px"
        }, 200, function () {
            $('#' + targetDrop).attr('isOpen', 'false');
            $('#' + targetDrop).animate({
                "height": "200px"
            });
        });
    } else {
        $('#' + targetDrop).animate({
            "height": "200px"
        });
    }
}).mouseout(function () {
    var targetDrop = $(this).attr('targetDropDown');
    setTimeout(function () {
        if ($('#' + targetDrop).attr('isHoveredOver') == 'true') {
            //DONOTHING
        } else {
            $('#' + targetDrop).animate({
                "height": "0px"
            });
        }
    }, 500);
});

$('.dropdownCont[isOpen="true"]').mouseover(function () {
    $(this).attr('isHoveredOver', 'true');
}).mouseout(function () {
    $(this).attr('isHoveredOver', 'false');
});

对于冗长而重复的代码，我感到抱歉，一旦我使它能够正确工作，我将使其更加面向对象，而我一直在弄乱它，以使其按照我希望的方式工作。 绝对卡住了。 如果您之前错过了该链接，请再次访问以下链接： http : //jsfiddle.net/KyCyB/对此的任何帮助或其他方法都将非常棒！ 谢谢！

Answer 1

您可以使用CSS执行此操作

这是一个jsbin： http ://jsbin.com/IsOFaJE/1/edit

我还制作了一个使用javascript向下/向上滑动的版本： http ://jsbin.com/IsOFaJE/2/edit

这是html：

<div>
    title
    <ul>
        <li>menuitem</li>
        <li>menuitem</li>
        <li>menuitem</li>
    </ul>
</div>

这是CSS：

ul {display: none; }
div:hover ul,
ul:hover { 
    display: block; 
}

Answer 2

再过大约30分钟后，我擦除了所有代码，并开始了新的策略，这就是我想到的，并且效果出色：

$('.navBarClickOrHover').mouseenter(function(){
            var targetDropDown = $(this).attr('targetDropDown');
            $('.dropdownCont').each(function(){
                $(this).css({
                    "height":"0px"
                });
            }); 
            setTimeout(function(){
                $('#'+targetDropDown).animate({
                    "height":"200px"
                });
            },500)

        }).mouseleave(function(){
            var targetDropDown = $(this).attr('targetDropDown');
            if($("#wrapper").find("#"+targetDropDown+":hover").length == 0){
                $('.dropdownCont').each(function(){
                    $(this).animate({
                        "height":"0px"
                    });
                });
            }
            else{
                $('#'+targetDropDown).bind('mouseleave', checkIfHoveredFunc);
            }
        });

        var checkIfHoveredFunc = function(){

            $('.dropdownCont').each(function(){
                $(this).animate({
                    "height":"0px"
                });
            });

        }