对于这个问题，我已经用完了我能想到或找到的解决方案。我正在固定在页面顶部。左侧有一个 anchor ，可将您带到页面顶部，如果将鼠标悬停在其上，将显示其他外部链接。右侧是带有 anchor 的页面部分列表，可将您滚动到这些部分。
这在桌面上运行良好，因为悬停和单击是单独的事件，但在 ipad 上它们是相同的。在 iPad 上，您应该能够触摸“产品列表”列表项并显示下拉菜单。如果再次触摸，它将带您回到顶部。现在，当您触摸它时，它将带您回到顶部并显示悬停。
这是一个重新创建代码和问题的 jsfiddle。 http://jsfiddle.net/hyaTV/5/
HTML
<ul class="one">
<li><a class="intrapage" href="#stage">Product Title</a>
<ul>
<li><a href="other product">other product</a></li> <!-- link that goes to different page -->
<li><a href="other product">other product</a></li> <!-- link that goes to different page -->
</ul>
</li>
</ul>
<ul class="two">
<li><a class="intrapage" href="#section_one">birds</a></li> <!-- goes to Birds section -->
<li><a class="intrapage" href="#section_two">bees</a></li> <!-- goes to bees section -->
</ul>
CSS
ul.one{float:left;list-style:none;}
ul.one ul{display:none;}
ul.one > li:hover ul{display:block;}
/* styling for right side nav */
ul.two{float:right;list-style:none;}
ul.two li{display:inline-block;}
JS
// scrolls window to element id with easing
$(".intrapage").click(function(event) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 850);
return false;
});
最佳答案
你可以使用 iOS :hover issue对你有利。我相信通过将您的 CSS 更改为
ul.one > li ul { display: none; }
ul.one > li:hover ul { display: block; }
也就是说，上述问题在其他移动操作系统上不存在。在 iOS 上无法鼠标移出。
不如detect if user is on mobile device并添加 .mobile使用 javascript 到 <body>然后在点击事件上切换子菜单。
CSS
ul.one > li:hover ul, ul.one > li.hover ul { display: block; }
JS
$('body.mobile ul.one > li').click(function(e) {
$(this).toggleClass('hover');
});
关于javascript - iOS点击正在激活下拉菜单的父 anchor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16219511/