iPad에서 CSS 드롭 다운 메뉴가 예상대로 작동하지 않습니다.

Question

바탕 화면에서 예상대로 작동하는 CSS 전용 드롭 다운 메뉴가 있습니다. iPad의 모바일 Safari에서 최상위 탐색 링크 중 하나를 클릭하면 해당 드롭 다운 메뉴가 잠시 표시되지만 링크를 따라 가면 사용자가 새 페이지로 이동합니다.

나는 이것에 대해 알 수있는 모든 것을 읽었으며, 기본 동작은 iPad가 첫 번째 탭을 공중에 떠올리게 할 것이며 실제로 두 번째 탭이있을 때까지 링크를 따라 가지 않는 것으로 생각됩니다. 이는 :hover 스타일이 해당 하위 메뉴의 display 속성을 변경하므로 장치가 첫 번째 탭에서 링크를 따르지 않는다는 것을 알고 있기 때문입니다.

이 동작은 다른 사이트에서 제대로 작동하는 것으로보고 내 웹 사이트의 다른 부분에서 제대로 작동하는 것을 보았지만 어떤 이유로 내 CSS 드롭 다운 메뉴에서 올바르게 동작하지 않습니다.

메뉴는 내 사이트 https://www.storeyourboard.com에서 볼 수 있습니다. 페이지 상단 근처에는 카테고리 이름이 나열된 가로 메뉴가 있습니다. iPad에서 이것을보고 메뉴 항목 중 하나 (예 : "Surfboard")를 누르면 iPad가 첫 번째 탭에서 드롭 다운 메뉴를 표시하지 않고 Surfboard 페이지로 이동하는 것을 볼 수 있습니다. 이상하게도, 내 태핑이 임의로 예상대로 동작하고 드롭 다운 메뉴가 탐색하지 않고 표시되는 경우가 있었지만 이는 드문 경우이며 일관되게 재현 할 수 없습니다.

이 메뉴에 대한 관련 마크 업입니다 :

HTML

<ul class="mainNav-menu"> 
    <li> 
     <a href="/sup-racks-bags/">SUP</a> 
     <div class="mainNav-submenu"> 
      <ul class="mainNav-submenu-menu"> 
       <!-- Submenu items here --> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <a href="/surfboard-racks-bags/">Surfboard</a> 
     <div class="mainNav-submenu"> 
      <ul class="mainNav-submenu-menu"> 
       <!-- Submenu items here --> 
      </ul> 
     </div> 
    </li> 
</ul> 

CSS 나는 다른 게시물 말을 본 적이

.mainNav-submenu { 
    display: none; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: auto; 
    background-color: #8a8a8a; 
    z-index: 20; 
    padding: 1rem; 
} 

.mainNav-menu > li:hover .mainNav-submenu { 
    display: block; 
} 

그에게 onclick="return true" 추가 메뉴 링크 또는 메뉴 컨테이너가 문제를 해결할 것이지만, 이것은 어떤 ef도 가지고 있지 않습니다. 나를 위해 fect. 나는 또한 사이트에서 fastclick.js을 사용하고 있다고 언급해야합니다. 이것이 문제의 원인이 될 수 있다고 생각했지만, 제거하면 정확한 동작을 볼 수 있습니다.

정확하게 작동하는지 확인하기 위해 코드 this article을 내 사이트에 추가했습니다. 즉, 내 사이트에 코드의이 작은 조각을 추가 :

<style> 
    p {height: 100px;} 

    p span { 
     display: none; 
    } 

    p:hover span { 
     display: block; 
    } 
</style> 

<p> 
    <a href="/">Tap me</a> 
    <span>You tapped!</span> 
</p> 

이것은 (심지어 fastclick 활성에) 제대로했다. 링크를 탭하면 "You tapped"스팬이 표시되고 다시 탭하면 길을 건너 뜁니다.

내 탐색 메뉴에서이 동일한 동작이 올바르게 작동하지 않는 이유를 알 수 없습니다. 내가 마크 업하거나 스타일을 지정한 방식입니까? 누구 아이디어가 있습니까? 내가 뭘해야할지 모르겠다.

UPDATE 아래 문서의 대답에

덕분에, 나는이 솔루션을 마련 할 수 있었다 :

.mainNav-menu > li > a { 
    pointer-events: none; 
} 

.mainNav-menu > li:hover > a { 
    pointer-events: all; 
} 

지금 사이트에 라이브 그리고 당신은 행동에서 볼 수 있습니다. 나는 이것이 왜 필요한지, 왜 그것이 원래 효과가 없었던 지 모르겠다. 그래서 아무도 아이디어가 있다면, 나에게 알려주기 바란다.

Answer 1

a 링크를 두드리는 이유는 무엇인지 잘 모르겠지만 여전히 문제를 해결해야합니다. 이러한 태그의 모든 텍스트를 정기적으로 조각뿐만 아니라 링크가되도록

---

첫째을합니다. 그래서

<a href="/surfboard-racks-bags/">Surfboard</a> 

을 유지뿐만 아니라, 숨겨진, 그래서이 기본적으로 display: none을 링크를 확인

그런

<p>Surfboard</p> 

이러한 요소 모두 동일한 내용과 스타일을 가지고 있는지 확인합니다 추가 할 수 있습니다. 그러나 div가 공중 선회 될 때, ( display: inline 같이 무언가에) 보이는 눈에 보이고 다른 비 연결을주십시오 display: none. 이상적으로 p 요소는 완벽하게 모든

바탕 화면에 대한

함께 있었던 a 것처럼, 동일한 스타일되어야 a 요소, 사용자가 사업부를 유혹하지 않을 경우, 이유가 없습니다 교체해야합니다 링크의 "링크"부분이 활성화되어야하므로 일반 텍스트 대신 사용됩니다. 사용자가 div를 가리키면 링크가 나타나기 때문에 div를 사용할 수 있습니다.

그러나 iOS 사용자가 div를 탭하면 :hover 효과를 트리거해야하지만 은 아니요 링크를 트리거해야합니다. 링크를 클릭했을 때 표시되지 않았으므로 트리거되지 않아야합니다. 사용자가 여전히 링크를 클릭하면 링크가 너무 빨리

이 방법에 대한 유일한 문제가 표시 될 수 있기 때문에,보다에게의 a 및 p 요소에 transition: display 0s 0.1s 같은 것을 추가하는 아이폰 OS 사용자가 드롭 다운을 열리면, 그/그녀는 그것을 다시 클릭하여 닫을 수 없습니다; 그 링크를 트리거합니다. 하지만 사용자가 다른 곳을 클릭하면 닫아야합니다.