在桌面上显示DIV on-hover并点击移动

Question

我想创建一个div，显示在桌面上悬停的另一个div，但在移动设备上点击即可。

这可能吗？

Answer 1

如果屏幕尺寸移动{

$("#element).click(some function) 
} 
else if screen size desktop{ 
    $("#element).hover(some function) 
} 

或周围的其他方法

$("#element").click(function(){ 
    if(screen size is mobile){ 
    //do something (show div) 
    } 
    else if(screen size is desktop){ 
    //do something 
    } 
}); 

$("#element").hover(function(){ 
    if(screen size is mobile){ 
    //do something 
    } 
    else if(screen size is desktop){ 
    //do something (show div) 
    } 
}); 

Answer 2

下面的代码可以帮助你..

var isAndroid = /android/i.test(navigator.userAgent.toLowerCase()); 
var isWindows = /windows phone/i.test(navigator.userAgent.toLowerCase()); 
var isBlackberry = /blackberry/i.test(navigator.userAgent.toLowerCase()); 
var isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase()); 

if(isAndroid || isWindows || isBlackberry || isiDevice){ 
    $('#element').on('click',function(){ 
     //your code here 
    }); 
}else{ 
    $('#element').on('hover',function(){ 
     //your code here 
    }); 
} 

或者，你可以看到下面的帖子。 ..

http://www.jquery4u.com/mobile/detect-mobile-devices-jquery/

Answer 3

结合撕心及以下CSS TRICKS答案：

if ($(window).width() < 960) { 

    $("#element").click(function(){ 

     var e = document.getElementById("foo"); 
     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
    }); 
} 
else { 

    $("#element").hover(function(){ 

     var e = document.getElementById("foo"); 
     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 

    }); 
}