响应式网站在pc上给一个元素定义了hover事件，在手机端点击的时候被触发了？

Question

<div class="dropdown">
  <a data-toggle="dropdown" href="#">xxx</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>
$('.dropdown').hover(function() {
   $(this).hasClass('open');
},function(){
   $(this).removeClass('open');
})

把boostrap的dropdown插件改成hover触发，在手机端点击时无法展开，发现是hover事件影响了，我该如何让这段代码在手机上不执行，只在pc上执行呢？

Answer 1

判断客户端是pc还是手机

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
 
var flag = IsPC(); //true为PC端，false为手机端

Answer 2

通过 http 头信息的方法来判断

if (Request.Headers["user-agent"] != null && Request.Headers["user-agent"].ToLower().ToString().IndexOf("mozilla") != -1) {
$('.dropdown').hover(function() {
   $(this).hasClass('open');
},function(){
   $(this).removeClass('open');
})
}

Answer 3

$(this).hasClass('open');
不应该是
$(this).addClass('open');
吗？

Answer 4

通过ua判断是pc还是手机

Answer 5

替换成mouseover事件试试?