0

我在遗留代码中有一些菜单结构如下：

<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 激活的，触摸浏览器在那里工作正常。

4

2 回答 2

5

是的，要让悬停伪类按照触摸设备上的下拉菜单的需要工作可能有点棘手。如果一个 jQuery 插件是一个选项，你可以考虑 Superfish。Silk Developer Guide 有一个页面讨论悬停菜单的 Superfish 解决方案。

祝你好运！

于 2014-02-18T21:35:27.950 回答
0

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

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

添加一个无操作的 onclick 处理程序。移动 safari 将发出 mousemove 并在触摸时单击此元素。请参阅https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

于 2013-12-30T23:42:42.867 回答