下拉菜单在 ipad 上不起作用答案

【问题标题】：drop down menu not working on ipad下拉菜单在 ipad 上不起作用
【发布时间】：2013-01-27 20:55:26
【问题描述】：

我的导航菜单有问题。它基本上是一个徽标图像，当悬停时，子菜单会向下滑动，然后在未悬停时向上滑动。它在台式机上运行良好，但我在移动设备上遇到的问题。特别是 iPad。出于某种原因，iPhone 似乎可以翻译它，但在 iPad 上，当您第一次单击图像时，下拉菜单会向下滑动然后快速向上滑动，并且不会再次出现。我一直在网上寻找解决方案，并尝试完全重写菜单以使用点击，但仍然没有让它在 iPad 上正常工作。如果有人可以帮助我或为我指明正确的方向，我将不胜感激！

我也把代码部分放在js fiddle

<div id="button">
<ul class="hover">
    <li class="hoverli">
        <img src="assets/images/menu_logo.jpg" width="210" height="160" class="menu_class"/>
        <ul class="file_menu">
            <li><a href="ourwork.html">our work</a>
            </li>
            <li><a href="about/about.html">about</a>
            </li>
            <li><a href="contact.html">contact</a>
            </li>
            <li class="#"><a href="#">blog</a>
            </li>
          </ul>
    </li>
</ul>

$(document).ready(function () {
$(".hoverli").hover(

function () {
    $('ul.file_menu').slideDown('medium');
},

function () {
    $('ul.file_menu').slideUp('medium');
});

$(".file_menu li").hover(

function () {
    $(this).children("ul").slideDown('medium');
},

function () {
    $(this).children("ul").slideUp('medium');
});
});

CSS

#newmenu {
position: absolute;
height: 32px;
width: 184px;
left: 35px;
top: 100px;
margin: auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#submenu {
display:none;
width:100px;
position: relative;
left: 110px;
font-family: helvetica;
font-size:12px;
}
#submenu li {
background-color: #FFFFFF;
position: relative;
}
#submenu li a {
color:#00000;
text-decoration:none;
padding:5px;
display:block;
text-align: right;
padding-right: 13px
}
.file_menu li a:hover {
color: #585858;
}
.blog {
padding-bottom: 10px;
}

【问题讨论】：

我遇到了类似的问题，并且已经停止使用 JavaScript。使用 CSS :checked 伪选择器：css-tricks.com/the-checkbox-hack
谢谢凯文我会看看那个链接，看看我能不能弄清楚。这似乎是一个常见问题，所以我很惊讶我在网上没有找到很多解决方案！

标签： javascript ipad drop-down-menu click hover

【解决方案1】：

如您所见，触控设备（包括 Android）不处理 Hover 或 Mouse 事件。考虑使用 .click() 或 .change()，我发现这对 DDL 或其他菜单/过滤行为特别有用。

【讨论】：