1

我有一个 css 供电的下拉菜单，在 iphone 或 ipad 上无法正常工作。

它可以在我检查过的所有其他浏览器和设备上按我的意愿工作。

我已经把它缩小到我没有包含在href标签中的菜单文本（例如单词'face'），就像它在代码的原始版本中那样。这就是与众不同的地方。将href标签包裹在字面上，下拉菜单在ipad / iphone上可以正常工作

显然我可以只添加 href 并完成，但我真的不想这样做，否则每个有触摸屏的人，通常必须点击菜单文本才能显示下拉菜单，将被带到任何地方链接点。首先破坏了下拉菜单的全部内容！

这是代码：

<div id="dropMenuWrapper">
  <div id="dropMenu">
        <ul class="level1">
        <li class="submenu">Face
            <ul class="level2">
                <li class="subCatodd"><a href="">powder</a></li>
                <li class="subCateven"><a href="">cream</a></li>
            </ul>
        </li>
    </ul>
  </div>
</div>

的CSS：

body {  behavior: url(includes/csshover.htc);}
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}


#dropMenuWrapper {
width:100%;
height:25px;
margin:0;
font-size:11px;
}

div#dropMenu {
width:750px;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin: 0; 
padding: 0;
}

div#dropMenu li {
position: relative; 
list-style: none; 
margin: 0; 
float: left; 
line-height: 1em;
}

div#dropMenu ul.level1 {
width:750px; 
margin:0 auto; 
text-align:center;
background:#4F4F4F;
height:25px;
z-index:1000;
}

div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block;text-decoration: none;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

为了方便一个jsfiddle：http: //jsfiddle.net/VvT6Y/1/

谁能指出一种让下拉菜单在 iphone/ipad 上工作而无需将文本设为链接的方法？

提前致谢 ：）

4

2 回答 2

4

“要在有人点击菜单按钮时出现下拉菜单，您只需添加

onClick=”return true”

<LI>到触发菜单弹出的任何列表项（例如 ）中的“A”标记。这也适用于级联菜单。”

来自 - http://blog.travelvictoria.com.au/2012/03/31/make-sure-your-websites-drop-down-menus-work-on-an-ipad/

于 2013-03-26T09:54:38.517 回答
2

您是否尝试将:active和/或:focus伪类添加到使用的每个实例:hover？

因此，例如，li.submenu:hover变为li.submenu:hover, li.submenu:active。

当:active元素“被用户激活”时，通常使用伪类。最常见的例子是当用户开始点击链接的动作（“mousedown”事件），但还没有完成动作（“mouseup”事件）时，链接上的点。

当:focus元素具有焦点（可以接受输入）时使用伪类。这在表单控件中最为明显，但实际上它的使用频率要高得多（是否见过链接周围的小虚线边框，尤其是当您通过表单时？那是:focus）。

（两者的 W3C 信息。）

我提到了两者，因为我不能 100% 确定在这种情况下会使用哪一个 iOS Safari。我会假设:focus，但我从浏览器中看到了更奇怪的东西。

（附带说明，您不需要.IDdiv#dropMenu应该是唯一的，所以就#dropMenu足够了。如果您的 ID 在您的页面上不是唯一的，那么您使用的 ID 是错误的。）

编辑如果伪类不起作用，那么不幸的是，目前您能够处理它的唯一方法是使用 JavaScript。值得庆幸的是，它很简单：

var is_touch_device = 'ontouchstart' in document.documentElement;

检测功能，然后您可以使用它来触发某些行为（添加类等）以模拟效果。如果您碰巧已经在使用 Modernizr，那么您可以使用它的Modernizr.touch功能来检测触摸屏。

于 2012-11-27T19:35:33.207 回答