在 iOS 上单击和/或悬停时打开 CSS 下拉菜单

Posted 2023-03-12

【中文标题】在 iOS 上单击和/或悬停时打开 CSS 下拉菜单

【英文标题】：CSS dropdown menu to open on click and/or on hover for iOS

【发布时间】：2013-03-26 03:52:51

【问题描述】：

我有一个在悬停时打开的 CSS 下拉列表，当有人使用 iPad 或 iPhone 等 ios 设备时会产生问题。我在这里创建了一个粗略的 jFiddle：

http://jsfiddle.net/7vtWy/1/

如果我使用带有 chrome 的 android 设备，它会很好用...单击主菜单项会显示下拉列表。在 iOS 上，什么都没有。有没有办法可以做到，如果有移动设备，由于没有悬停之类的东西，下拉菜单会显示在主菜单点击上？

HTML

<header>        
<nav role="navigation" class="clearfix">
        <ul id="nav-site">
            <li>
                <span class="arrow">Shop</span>
                <div class="dropdown_1column">
                    <div class="mainbox clearfix">
                        <ul>
                            <li class="main-category"><a href="new-products/">New Arrivals</a></li>
                            <li class="main-category"><a href="gifts-under-100/">Gifts Under $100</a></li>
                            <li class="main-category"><a href="staff-favorites/">Staff Favorites</a></li>
                            <li class="main-category"><a href="made-in-the-usa/">Made in the USA</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </nav>

CSS

header nav  text-transform: uppercase; width: 980px; font-weight: 700; font-size: 15px;
header nav a  color: #000; text-decoration: none; 
header nav li  float: left; display: block; position: relative; z-index: 999; 

header nav #nav-site  float: left; 
header nav #nav-site li  padding: 0 10px 3px 0; 
header nav .arrow:hover  cursor: pointer; 
header nav #nav-account  float: right; 
header nav #nav-account li  margin: 0 0 3px 10px; 
header nav #nav-account .cart span  font-weight: 400; font-size: 11px; padding: 2px 4px; display: block; position: absolute; top: 01px; left: 48px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #edeb2b; display: block; 
header nav #nav-account .cart span:hover  background: #f6f6f6; 

header nav .dropdown_1column  position: absolute; left: -999em; width: 980px; font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 1px; 
header nav li:hover .dropdown_1column left: auto; top: auto; 
header nav .dropdown_1column .mainbox  background: #edeb2b; border: 4px solid #000; 
header nav .dropdown_1column ul  width: 161px; float: left; letter-spacing: 0; height: 235px; border-right: 1px solid #d4d220; 
header nav .dropdown_1column ul.last  border: none; 
header nav #nav-site .dropdown_1column li  float: none; margin: 0; font-size: 12px; 
header nav #nav-site .dropdown_1column li.main-category  font-weight: 700; text-transform: uppercase; font-size: 13px; 
header nav .dropdown_1column a  display: block; padding: 5px 10px; 
header nav .dropdown_1column a:hover  background: #d4d220; 
header nav #nav-site .dropdown_1column .popular  padding: 10px; 
header nav .dropdown_1column .popular a  display: inline; padding: 0; 
header nav .dropdown_1column .popular a:hover  background: #d4d220; 
header nav .dropdown_1column li.main-category a:hover  background: none; color: #363636; 

header nav .dropdown_1column_right  position: absolute; left: -999em; font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 1px; 
header nav .dropdown_1column_right span  position: absolute; right: 10px; padding: 0 4px; background: #d4d220; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; 
header nav li:hover .dropdown_1column_right left: auto; right: -49px; top: auto; 
header nav .dropdown_1column_right ul letter-spacing: 0; background: #edeb2b; border: 4px solid #000; width: 175px; 
header nav #nav-account .dropdown_1column_right li  float: none; margin: 0; 
header nav .dropdown_1column_right a  display: block; padding: 5px 10px; 
header nav .dropdown_1column_right a:hover  background: #d4d220; 

【参考方案1】：

代替悬停，我使用 jQuery 到 bind() 到 touchstart 和 touchend 函数。简而言之，负责显示下拉菜单的:hover 更改为.hover。 在您的移动环境中，这将转换为“当用户触摸您的导航项目时，将显示下拉菜单。当他们松开手指时，它会消失。”

请注意，使用户体验更好的更改可能包括“点击/点击关闭”或类似的东西。

另外，如果这也用于桌面环境，mouseenter 和 mouseleave 也可以正常工作。 AFIK, in Mobile Safari as well

jQuery 来了

$(function () 
    $('header nav li').bind(
        'touchstart': function () 
            $(this).addClass('hover')
        ,
            'touchend': function () 
            $(this).removeClass('hover')
        
    );
);

Fiddle : http://jsfiddle.net/gvyKB/3/