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