悬停和鼠标同时jQuery效果

Question

我有一个悬停效果的按钮：

$('.donations').hover(function() { 
    $(this).find('#donate_expand_top').hide().stop(true, true).animate({ 
     height: 'toggle' 
    }, { 
     duration: 200 
    }); 

我现在需要添加同一个按钮上点击的效果，使得它的触摸友好。我理解这个概念很容易使用$('.donations').click(function(){...，但问题在于将这两种效应组合在一起无法正常工作。只要我点击按钮，我也徘徊，所以它试图启动两个都没有工作。

有没有简单的解决方案呢？

Answer 1

他们的方式我已经处理它：

1. 使用modernizr检测，如果用户的设备是触摸启用。您还可以使用任何其他方式来检测这一点。

2. 相应地应用您的悬停/点击绑定。

Answer 2

这还不是最完美的解决方案，但它跟踪用户的互动与该按钮并触发悬停单击事件：

var interactingWithBtn = false; 
$('#donate_expand_top').hover(function() { 
    if(!interactingWithBtn) { 
     interactingWithBtn = true; 
     $('#donate_expand_top').trigger('click'); 
    } 
}, 
function() { 
    interactingWithBtn = false; 
}); 

$('#donate_expand_top').click(function() { 
    if(!interactingWithBtn) 
     interactingWithBtn = true; 
    $(this).find('#donate_expand_top').hide().stop(true, true).animate({ 
     height: 'toggle' 
    }, { 
     duration: 200 
    }); 
});