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"
                });
            });

        }

悬停时的jQuery Dropdown行为

2 个答案: