드롭 다운 메뉴에 : 모바일 두 번 탭에 마우스를 가져

Question

UPDATE : 금 난 그냥 내 탭에 호출의 응답 제안을 통해 위의 코드를 시도했습니다 오전 9시 12분 13초

<div id="containerdropdown"> 
    <a class="mainNav navLink" href="" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">ALL CATEGORIES</a> 
    <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');$('.navLink').on('tap', function(){ 
    rolloverMenu(1, 'mainMenu');})" onmouseout="rolloverMenu(0, 'mainMenu');"> 

    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a> 

    </div></div> 

이벤트 핸들러 여전히 허용되지 않습니다 아래의 탭> 드롭 다운> 두 번 탭> 상위 링크 방문을 렌더링 아래의 데모 참조 링크로 사용하십시오. 잘못된 위치에 탭 이벤트를 삽입하고 있습니까? Android HTC Incredible 2에서 상위 링크는 드롭 다운이 표시되지 않고 해당 페이지로 이동하는 표준 링크로 유지됩니까?

또한 머리에이로드 해요 : http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js

---

원래 질문 :

내가 한 내가 출판에 매우 가까이있어 웹 사이트가. 같은 코드를 통해

나는 구현 드롭 다운 메뉴가 있습니다

<div id="containerdropdown"> 
    <a class="mainNav navLink" href="" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">ALL CATEGORIES</a> 
    <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');"> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a><br /> 
    <a href="#">Test</a> 

그들은, 바탕 화면에 잘 작동 OK (여전히 그러나 아이폰 OS에 아주 나쁜), 안드로이드에 절대적으로 끔찍한와 다른 곳에 이동에 .

내가이 원하는 : http://suan.github.com/make_dropdown/demo.html

을하지만 난 정말 내 드롭 다운을 모두 코딩하고 싶지 않아요. 누구든지 위의 샘플처럼 휴대 전화를 가리 키지 않고 탭에서 기능하도록 내 드롭 다운을 허용 할 수있는 코드를 조정할 것을 제안 할 수 있습니까? (보조 메뉴로 탭 이동하는 것은 힘들 것입니다하지만)

Answer 1

당신이 jQuery Mobiletap 이벤트 사용할 수 있습니다

$('.navLink').bind('tap', function(){ 
    rolloverMenu(1, 'mainMenu'); 
}) 

Answer 2

.rolloverMenu { display:none; } /* You should hide this with CSS instead of inline; */ 
.navLink:hover + .rolloverMenu, 
.navLink:focus + .rolloverMenu { display:block; } 

뿐만 아니라 키보드 탐색을 위해 작동합니다. 가리 키도록뿐만 아니라 JS 바인딩으로 포커스를 지정할 수도 있습니다.

Answer 3

좋아을, 나는 완전히 괴사가-게시하도록하겠습니다 알고 있지만 나는 비슷한 문제를 가지고 있었고, 내 자신을 해결하기 위해 노력이 질문에 건너 왔어요. D

jQuery 모바일이 아닌 일반 jQuery를 사용하여 수행 한 작업은 서브 메뉴를 표시하는 클래스를 쓴 다음 해당 클래스를 켜기 및 끄기로 토글 한 것입니다. 터치하여 기본 설정을 지 못했습니다. 그런 다음 setTimeout 기술을 사용하여 두 번 탭을 감지하고 상위 링크로 이동합니다. 실행중인 CodePen은 다음과 같습니다. http://codepen.io/StuffieStephie/pen/QbZjJP
참고 : Chrome의 PC에서 개발자 도구로 이동하려면 Ctrl + Shift + I를 누른 다음 모바일 장치 아이콘을 클릭하여 다양한 터치 장치를 에뮬레이트하십시오.

//Tap and double tap function for large touch screens 
var tapped=false; 
$("nav li.gotsMenus h3").on("touchstart", function(e){ 
    var theOne = $(this); 
    if((!tapped)){ 
     tapped=setTimeout(function(){ 
//single tap function 
      $("nav li.gotsMenus").not(theOne.parent()).removeClass("showSub"); 
     theOne.parent().toggleClass("showSub"); 
      e.preventDefault(); 
      tapped=null; 
     },300); //wait 300ms 
    } else { 
//double tap function 
     clearTimeout(tapped); 
     tapped=null; 
     window.location = $(this).find("a").attr("href"); 
    } 
    e.preventDefault(); 
}); 

다음은 우리가 토글하는 클래스입니다.

nav li ul{ 
overflow: hidden; 
max-height:0; 
transition: max-height .5s ease-in; 
width: 200px; 
position: absolute; 
font-size: .8em; 
} 
nav li.showSub ul { 
max-height: 1000px; 
} 

나는 슬라이드 효과를 최대 높이 속성을 애니메이션 해요,하지만 당신은 그냥 간단하게 표시 사이를 전환 할 수 있습니다 : 없음 표시 : 블록을.