모바일 호환 드롭 다운 메뉴

Question

나는 다음과 같은 코드를 가지고 있는데, 나는 모바일과 호환되도록 만들지 않을 것이다. 지금 드롭 다운 메뉴가 나오지 않고 직접 링크로 이동합니다. 두 번째 클릭에서 링크로 이동하는 것이 좋지 않습니다. 첫 번째로 드롭 다운 메뉴가 나타납니다.

<ul> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Item 1</a> 
     <ul> 
      <li href="#"><a>Compositions</a></li> 
      <li href="#"><a>Improv</a></li> 
      <li href="#"><a>Recitals</a></li> 
      <li href="#"><a>Videos</a></li> 
     </ul> 
    </li> 
    <li href="#"><a>Programming</a></li> 
    <li href="#"><a>Academic</a></li> 
    <br class="clear" /> 
</ul> 

CSS :

재정의 touchstart와 touchend 이벤트를 전체에 :

#topnav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #444; 
    border-radius: 0.3em; 
    color: #ddd; 
    font-size: 16px; 
    vertical-align: middle; 
    text-align: center; 
} 
#topnav ul li { 
    border-radius: 0.2em; 
    float: left; 
} 
#topnav ul li a { 
    display: inline-block; 
    margin: 0.4em 1em; 
    color: inherit; 
} 
#topnav ul li ul { 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
    display: none; 
    position: absolute; 
} 
#topnav ul li ul li { 
    float: none; 
    text-align: left; 
} 
#topnav ul li:hover ul, #topnav ul li ul:hover { 
    display: block; 
} 
#topnav li:hover { 
    background-color: #04f; 
} 

Answer 1

당신은 한마디로 순수 자바 스크립트와 CSS를 사용하여이 작업을 수행하려면이 당신이해야 할 일이다 탐색

navigation.addEventListener("touchend", function (e) { 
    e.preventDefault(); 
    // other code here 
}, false); 

이 시점에서 탐색을 열려면 코드를 추가해야합니다. 이 시점에서 탐색 링크는 작동하지 않습니다.

핸들 모든 링크를 클릭 (또는 네비게이션의 주요 항목에 대한 두 번째 링크 클릭) 자바 스크립트와는

window.location.href = link.url; 

가 던져 페이지를 탐색하는 데 사용할.

많은 도움이 되었더라도 좋겠습니다. 거기에 도움이된다면 이미 만든 라이브러리를 확인할 수도 있습니다. 마지막 팁 : 드롭 다운 메뉴에서 최신 iOS 기본 동작을 확인하고 기능을 모방하려고합니다. 행운을 빕니다! :)