0

让这个下拉列表正常运行有些困难。当您将鼠标悬停在下拉的元素上时，它应该保持打开状态。我做了一个函数，每半秒检查一次你的鼠标是否悬停在该元素上，如果是，它什么也不做，如果不是，它关闭下拉菜单。这是我的小提琴，看看我的意思：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/ 任何帮助或不同的方法都会很棒！谢谢！

4

2 回答 2

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; 
}
于 2013-09-13T15:52:29.137 回答
0

大约又过了 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"
                });
            });

        }
于 2013-09-13T17:32:57.697 回答