1

我的导航菜单有问题。它基本上是一个徽标图像，当悬停时，子菜单会向下滑动，然后在未悬停时向上滑动。它在台式机上运行良好，但我在移动设备上遇到的问题。特别是 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;
}
4

1 回答 1

0

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

于 2013-07-18T14:17:33.670 回答