纯粹的<div>纯css下拉菜单,可以在触摸浏览器,iOS,iPad上点击它们吗？

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有一个页面,讨论悬停菜单的Superfish解决方案.

祝好运!