Question

我在遗留代码中有一些菜单，如下所示：

<div id="show-hide-facets-button">iOS/Touch Browser Popdown Test
    <div id="show-hide-facets-dropdown">
        <ul>
        <li class="show-hide-facets-row" id="item1">Item One</li>
        <li class="show-hide-facets-row" id="item2">Item Two</li>
        </ul>
    </div>
</div>

在悬停时隐藏弹出窗口：

#show-hide-facets-button {
}
#show-hide-facets-dropdown {
    display: none;
}
#show-hide-facets-button:hover #show-hide-facets-dropdown {
    display: block;
}

jsfiddle位于http://jsfiddle.net/brycenesbitt/y3kb7/

请注意，没有锚点或其他可点击元素。在这种情况下，在顶层引入可点击元素的简洁方法是什么，因此鼠标浏览器用户可以继续悬停，但触摸浏览器用户可以通过点击访问菜单项？菜单项全部用jquery激活，触摸浏览器在那里工作正常。

Answer 1

是的，让hover伪类按照触摸设备上的下拉菜单的需要工作可能有点棘手。如果jQuery插件是一个选项，你可以考虑使用Superfish。 Silk Developer Guide有一个讨论the Superfish solution for hover menus。

的页面祝你好运！

Answer 2

我在Apple开发者网站上找到了最干净的解决方案：

<div id="show-hide-facets-button" onclick = "void(0)">

添加do-nothing onclick处理程序。移动safari将发出鼠标移动并在触摸时单击此元素。见https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

纯<div>纯css下拉菜单，使它们可以在触摸浏览器，iOS，iPad上点击？</div>

2 个答案: