Question

这个想法是在悬停时向下移动一个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);
});

Answer 1

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

$(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);
    });

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

Answer 2

问题在于，当你点击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);
            }
        }
    });
});

FIDDLE

如何在同一元素上使用.hover和.click

2 个答案: