在桌面上悬停显示 DIV 并在移动设备上单击答案

【问题标题】：Show DIV on-hover on Desktop and on-click on Mobile在桌面上悬停显示 DIV 并在移动设备上单击
【发布时间】：2018-09-14 00:14:15
【问题描述】：

我想创建一个 div，它在桌面悬停时显示另一个 div，但在移动设备上单击时显示。

这可能吗？

【问题讨论】：

看看这个stackoverflow.com/questions/7715124/…
谢谢Sixin Li，但是我想要这个功能，当你点击它时，div会出现在移动设备上而不是悬停在桌面上。

标签： jquery css

【解决方案1】：

以下代码可能会对您有所帮助..

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/

【讨论】：

【解决方案2】：

if screen size mobile{

  $("#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)
   }
});

【讨论】：

...如果我不能根据视口宽度来区分？

【解决方案3】：

结合Sixin和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';

  });
}

【讨论】：