jQuery по щелчку главного навигационного элемента, изменение другого элемента на странице

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