Question

我尝试修改我的jQuery代码，只在默认桌面设备上使用“悬停”事件，并在触摸设备上执行“点击”功能。有理由认为，通过分离它们可以获得更好的可用性。

我将整个代码发布在这个小提琴中：http://jsfiddle.net/syZC6/

 $(document).ready(function(e){
              $("header").hover(function() {   
                  if ($('#expandMenu').is(':visible'))
                  {
                      $('#menubar').removeClass('menu-active');
                      $('#switcher').removeClasse'switcherOpen');
                  }
                  else
                  {
                      $('#menubar').addClass('menu-active');
                      $('#switcher').addClass('switcherOpen');
                  }

                  $('#expandMenu').slideToggle( "fast");
               });          
                });

也许有一个解决方案，就像我以前做过的那样：

$(window).width() < 900 ? "true" : "false",

但它只是检测窗口加载时的当前宽度，而不是设备类型......

非常感谢你的帮助！

Answer 1

您可以根据条件声明活动

DEMO http://jsfiddle.net/e2fc7/

   var touchscreen;
   if (window.matchMedia("(max-width: 300px)").matches) {
       touchscreen = true;
   } else {
       touchscreen = false;
   }

   var evt = touchscreen ? 'touchstart' : 'mouseenter';

   $("header").bind(evt, function () {
       if ($('#expandMenu').is(':visible')) {
           $('#menubar').removeClass('menu-active');
           $('#switcher').removeClasse 'switcherOpen');
   } else {
       $('#menubar').addClass('menu-active');
       $('#switcher').addClass('switcherOpen');
   }
   $('#expandMenu').slideToggle("fast");
   });

jQuery点击事件只是为了触摸，所有其他人都悬停

1 个答案: