iPad/iPhone 上的下拉 Jquery/CSS 菜单没有响应

Question

我一直在设计和编码我的网站，但在 iPad 或 iPhone 上查看网站时，简单的下拉菜单不起作用。

我环顾四周并尝试实现一些在线解决方案，即识别用户何时使用特定类型设备的 jquery 片段，但无济于事。我不确定是因为这些方法已被弃用还是因为我做错了（可能是后者）

有问题的网站是 http://www.sotomayormac.com

顶部菜单项：“我们的想法”通过 href=# 链接下拉到子菜单。当在 iPad/iPhone 上点击时，它会突出显示（a:hover），但不会出现子菜单。我很确定这是问题的关键部分。

菜单的html代码如下：

 <!-- Start of MENU -->
 <ul id="ddmenu">
<li><a id="topLink" href="#">Our thinking</a>
<ul>
    <li><a href="index.html">Showcase</a></li>
    <li><a href="about.html">About us</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
</li>

相应的 CSS:

#ddmenu {
background: #fff no no-repeat;
margin-left:50px;
padding: 0;
height:43px;
width:200px;
}

#ddmenu li {
float: left;
list-style: none;
margin-left:0px;
}

#ddmenu li a {
background:#fff;
display: block;
padding: 0px 0px;
text-decoration: none;
width: 70px;
color:#000;
white-space: nowrap;
text-align:left;
}

#ddmenu li a:hover {
background: #fff;
color:#666;
}

#ddmenu li ul {
margin: 10px 0 0 0px;
padding: 0;
position: absolute;
visibility: hidden;
width:600px;
}

#ddmenu li ul li {
display:inline;
}

#ddmenu li ul li a {
width: auto;
background: #fff  right no-repeat;
display: inline;
color: #000;
padding-right:10px;
}

#ddmenu li ul li a:hover {
background: #fff no-repeat;
color:#666;
}

和 jquery:

// <![CDATA[
var timeout    = 500;
var closetimer = 500;
var ddmenuitem = 0;

function ddmenu_open(){
    ddmenu_canceltimer();
       ddmenu_close();
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');
}

function ddmenu_close(){
    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}

function ddmenu_timer(){
    closetimer = window.setTimeout(ddmenu_close, timeout);
}

function ddmenu_canceltimer(){
    if(closetimer){
        window.clearTimeout(closetimer);
            closetimer = null;
}}

$(document).ready(function(){
    $('#ddmenu > li').bind('mouseover', ddmenu_open)
    $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
});

document.onclick = ddmenu_close;
// ]]>

我想就是这样。我是这类事情的菜鸟，所以任何帮助将不胜感激。它可能正盯着我的脸，但我无法弄清楚！

干杯：

为所有 jscript

$(document).ready(function() {

});
$("#slideshow").css("overflow", "hidden");

$("ul#slides").cycle({
fx: 'fade',
speed: 2000,
timeout: 8000,
pause: true,
prev: '#prev',
next: '#next',
after:     onAfter
});

function onAfter(curr,next,opts) {
var caption =(opts.currSlide + 1) + ' / ' + opts.slideCount;
$('#caption').html(caption);
}

$(".button").hover(function() {
    $(this).attr("src","socialnetworks_hover_03.gif");
        }, function() {
    $(this).attr("src","socialnetworks_05.gif");
});

// <![CDATA[
var timeout    = 500;
var closetimer = 500;
var ddmenuitem = 0;

function ddmenu_open(){
    ddmenu_canceltimer();
       ddmenu_close();
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');
}

function ddmenu_close(){
    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}

function ddmenu_timer(){
    closetimer = window.setTimeout(ddmenu_close, timeout);
}

function ddmenu_canceltimer(){
    if(closetimer){
        window.clearTimeout(closetimer);
            closetimer = null;
}}

var toggle_clicked = false;
function ddmenu_toggle(){
if(toggle_clicked) {
    toggle_clicked = false;
    ddmenu_timer();
} else {
    toggle_clicked = true;
    ddmenu_open();
}
}

$(document).ready(function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||              (navigator.userAgent.match(/iPad/i))) { 
    $('#ddmenu > li').bind('click', ddmenu_toggle);
} else {
    $('#ddmenu > li').bind('mouseover', ddmenu_open);
    $('#ddmenu > li').bind('mouseout',  ddmenu_timer);  
}
});

document.onclick = ddmenu_close;
// ]]>

Answer 1

iPad/iPhone 不支持 mouseover、mouseout 事件。

对于支持触摸屏的移动浏览器，您需要使用 click 事件或 touchstart、touchend。

例如，对于 iPad/iPhone 设备，请编写 $('#ddmenu > li').bind('click', ddmenu_open) 而不是 $('#ddmenu > li')。 bind('mouseover', ddmenu_open)

更新：

将您的代码：替换

$(document).ready(function(){
    $('#ddmenu > li').bind('mouseover', ddmenu_open)
    $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
});

为：

var toggle_clicked = false;
function ddmenu_toggle(){
    if(toggle_clicked) {
        toggle_clicked = false;
        ddmenu_timer();
    } else {
        toggle_clicked = true;
        ddmenu_open();
    }
}

$(document).ready(function(){
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { 
        $('#ddmenu > li').bind('click', ddmenu_toggle);
    } else {
        $('#ddmenu > li').bind('mouseover', ddmenu_open);
        $('#ddmenu > li').bind('mouseout',  ddmenu_timer);  
    }
});

Answer 2

您使用的是 mouseover 和 mouseout，触摸屏不支持它们。

请参阅有关 Apple JavaScript 触摸事件。

你可以这样使用它：

document.addEventListener('touchstart', function(e) {
    // Do sth.
}, false);