在桌面上顯示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'; 

    }); 
}