Question

我创建了一个菜单，因此当用户将鼠标悬停在主菜单项上时，菜单下方的功能图像将会改变。这有效。我设置了类似的jQuery以使用点击而不是悬停来容纳触摸屏，但这不起作用。

我的代码的要点......首先，我测试一下触摸设备。如果是的话，

    jQuery(document).ready(function(){
        jQuery('.menu-item-1').on('click', function(){
            jQuery('#feature-image').attr('src', 'http://jdaviswebdesign.com/education/wp-content/uploads/menu-image1.jpg');
        });
        jQuery('.menu-item-2').on('click', function(){
            jQuery('#feature-image').attr('src', 'http://jdaviswebdesign.com/education/wp-content/uploads/menu-image2.jpg');
        });            
        ...repeated for each main menu li

我创建了一个可在此处查看的虚拟页面（http://www.jdaviswebdesign.com/menu.html）。虚拟页面包括CSS，jQuery和HTML。

非常感谢任何帮助或想法。我已经尝试过编写点击功能的每一种组合都无济于事。

Answer 1

是的，你是对的触摸屏不会检测悬停事件，但你知道你可以使用jQuery .bind('touchstart touchend', function(){});来发射你的事件，但是最好首先检测触摸屏设备。尝试这样来检测它对我有用的触摸屏。

function is_touch_device() {
  return 'ontouchstart' in window        // works on most browsers 
      || navigator.maxTouchPoints;       // works on IE10/11 and Surface
};
if( is_touch_device() ) {
        alert("Touch Device");
}

来源https://stackoverflow.com/a/4819886/3967385

jQuery点击主导航项，更改页面上的不同元素

1 个答案: