下拉JQuery/CSS菜单没有响应在iPad/iPhone上

Question

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

我环顾四周，试图实现一些在线的解决方案，即jQuery的片段，可以识别用户何时使用特定类型的设备，但无济于事。我不知道，如果它的，因为这些方法现在已经过时，或者因为我做错了（可能是后者）

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

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

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; 
// ]]> 

我认为这是关于它。我是这种东西的小菜，所以任何帮助将不胜感激。它可能正在凝视我的脸，但我无法弄清楚！

干杯

ALL 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)

UPDATE：

替换代码：

$(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 touch events。

您可以使用它像：

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