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

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

小提琴