Question

我的导航菜单有问题。它基本上是一个徽标图像，当悬停时，子菜单向下滑动，然后在不悬停时向上滑动。它适用于台式机，但问题是我使用移动设备。特别是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;
}

Answer 1

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

下拉菜单不适用于ipad

1 个答案: