Menu rozwijane Jquery/CSS nie odpowiada na iPadzie/iPhonie

Question

Projektowałem i koduję moją witrynę, a proste rozwijane menu nie działa podczas przeglądania witryny na iPadzie lub iPhonie.

Rozejrzałem się i starałem się wdrożyć niektóre rozwiązania, które są w Internecie, tj. Fragmenty jquery, które rozpoznają, kiedy użytkownik korzysta z określonego rodzaju urządzenia, ale bezskutecznie. Nie jestem pewien, czy jego ponieważ metody te są przestarzałe lub dlatego, że robię to źle (prawdopodobnie ostatni)

Witryna w pytaniu http://www.sotomayormac.com

górna pozycja menu: „Nasze myślenie” spada do podmenu za pośrednictwem linku href = #. Zostanie to wyróżnione (a: hover) po dotknięciu na iPadzie/iPhonie, ale nie pojawi się żadne podmenu. Jestem prawie pewien, że to kluczowa część problemu.

kod html do menu jest następująca:

<!-- 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> 

odpowiedni 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; 
} 

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

Myślę, że to wszystko. Jestem noobem w tego rodzaju sprawach, więc każda pomoc będzie bardzo cenna. To prawdopodobnie patrzy mi prosto w twarz, ale nie mogę tego zrozumieć!

Cheers

WSZYSTKICH w 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 nie obsługuje mouseover, mouseout wydarzeń.

Musisz użyć zdarzenia click lub touchstart, touchend dla przeglądarek mobilnych z obsługą ekranu dotykowego.

Na przykład dla urządzenia zapisu iPad/iPhone $('#ddmenu > li').bind('click', ddmenu_open) zamiast $('#ddmenu > li').bind('mouseover', ddmenu_open)

UPDATE:

zastąpić kodu:

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

do tego:

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

Yo używasz mouseover i mouseout, które nie są obsługiwane na ekranach dotykowych.

Zobacz dokumentację dotyczącą Apple JavaScript touch events.

Można go używać tak:

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