1

这个想法是在悬停时稍微向下移动 div 并单击以进一步向下移动以显示内容。问题是，当您单击 div 并且它向下移动时，您不再将鼠标悬停在其上，因此它会执行“未悬停时关闭”功能。

$(function () {
    $('.more').hover(function () { //Open on hover 
        $('#pull_down_content').animate({
            'top': '-360px'
        }, 1000);
    }, function () { //Close when not hovered
        $('#pull_down_content').animate({
            'top': '-380px'
        }, 1000);
    });
});
$('.more').click(function () { //Move down when clicked
    $('#pull_down_content').animate({
        'top': '0px'
    }, 1000);
});
4

2 回答 2

3

在元素上放置一个类以表示它已被单击，如果它具有该类，则不要关闭它：

$(function() {        
    $('.more').hover(function(){    //Open on hover 
           $('#pull_down_content').animate({'top':'-360px'},1000);
        },    
        function(){   //Close when not hovered
           if (!$('#pull_down_content').hasClass("expanded"))
               $('#pull_down_content').animate({'top':'-380px'},1000);    
        });
    });
    $('.more').click(function(){    //Move down when clicked
        $('#pull_down_content').addClass("expanded").animate({'top':'0px'},1000);
    });

当然，您现在需要另一个触发器来确定在单击项目后何时撤消悬停动画；如何做到这一点完全取决于您想要达到的效果。

于 2012-06-23T19:45:37.797 回答
1

问题是，当您单击 div 并且它向下移动时，您不再将鼠标悬停在其上，因此它会执行“未悬停时关闭”功能。

我不确定我明白了吗？您知道带有绑定事件的元素与您制作动画的元素不同吗？

无论如何，可能是这样的：

$(function() {
    $('.more').on('mouseenter mouseleave click', function(e) {
        if (!$(this).data('clicked')) {
            var Top = e.type==='mouseenter' ? '-360px' : e.type==='click' ? '0px' : '-380px';
            $('#pull_down_content').stop().animate({'top': Top}, 1000);
            if (e.type==='click') $(this).data('clicked', true);
        }else{
            if (e.type==='click') {
                $(this).data('clicked', false);
                $('#pull_down_content').stop().animate({'top': '-380px'}, 1000);
            }
        }
    });
});

小提琴

于 2012-06-23T20:16:47.890 回答