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