基于触摸的设备上的下拉菜单

Posted 2023-04-13

【中文标题】基于触摸的设备上的下拉菜单

【英文标题】：Drop-down menu on touch based devices

【发布时间】：2012-07-25 01:34:16

【问题描述】：

我的网站上有这个导航栏，但它没有在我的 iPod touch 上下拉，我怀疑 iPhone 和 iPad 也是如此。 This is one of the pages

我想知道是否有任何快速修复来启用触摸/悬停。

CSS

【问题讨论】：

与您的问题无关，但在 IE8 中，您的标题略微覆盖了文本的顶行“ORHS Foundation”。

附带说明，您应该将页面顶部的横幅缩小很多（目前为 9514 x 1732）

【参考方案1】：

如果你对iDevices感兴趣，那么你可以使用这个技巧：

#nav ul 
display: none;
/* Your styles */

#nav > li:hover ul 
display: block;

/* This is important */
#nav > li > a:hover 
color: #fff; /* You can set the same color or add other style.*/

如果一个元素具有:hover 事件，那么第一次点击ios 呈现:hover，第二次点击引发点击事件。

应该可以的。

附：最好为移动、触控和桌面制作不同的 UI 逻辑。

【参考方案2】：

这里有一篇很好的文章 - http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

我建议使用Modernizr，因为它提供了可用于触摸屏设备的非触摸 CSS 类，或者您可以使用 javascript 检测悬停并为元素添加类。

if (!("ontouchstart" in document.documentElement)) 
    document.documentElement.className += " no-touch";

【参考方案3】：

我遇到的最优雅的解决方案是Osvaldas Valutis

他的方法涉及一个非常小的 jQuery 插件来检测带有下拉 ul 菜单的导航列表项上的触摸事件。

例如，您可以这样标记导航：

<nav id="nav-primary">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a>
            <ul>
                <li><a href="/about/index.html">Dropdown item 1</a></li>
                <li><a href="/about/page.html">Dropdown item 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

然后你可以像这样用一行 jQuery 调用插件：

$( '#nav-primary li:has(ul)' ).doubleTapToGo();

这可确保上例中的主页链接仍按预期工作，因为它没有下拉菜单。唯一（非常小的）缺点是下拉菜单的第一个链接有一点冗余，但这并没有什么坏处。

【讨论】：

我想知道有多少人会理解双击的必要性。网络告诉我们所有人双击是桌面行为。并且单击（或点击）是网络行为。

我相信大多数用户都不会发现这种技术