Question

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

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

我现在需要在同一个按钮上添加一个点击效果，以便它对触摸友好。我使用$('.donations').click(function(){...很容易理解这个概念，但问题在于将这两种效果结合起来却无法正常工作。一旦我点击按钮，我也会徘徊，所以它试图同时触发两者并且都不起作用。

有一个简单的解决方案吗？

Answer 1

我处理它的方式：

使用modernizr检测用户的设备是否启用了触控功能。您还可以使用任何其他方式来检测此信息。
相应地应用你的悬停/点击绑定。

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

将hover和鼠标悬停在同步jquery效果上

2 个答案: