2012-02-07 67 views
5

我一直在設計和編碼我的網站,並且簡單的下拉菜單在iPad或iPhone上查看網站時不起作用。下拉JQuery/CSS菜單沒有響應在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; 
// ]]> 

回答

4

的iPad/iPhone不支持mouseovermouseout事件。

對於支持觸摸屏的移動瀏覽器,您需要使用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); 
    } 
}); 
+0

嗨感謝您的意見,所以將這些方針的東西是什麼,我找? ((navigator.userAgent.match(/ iPhone/i))||(navigator.userAgent.match(/ iPod/i))||(navigator.userAgent.match(/ iPad/i))){$ (document).ready(function(){$('#ddmenu> li')。bind('click',ddmenu_open)$('#ddmenu> li')。bind('mouseout',ddmenu_timer)}); }' – 2012-02-08 12:38:25

+0

我已經更新了我的代碼。 – antyrat 2012-02-08 12:39:28

+0

嗯,它仍然不工作...我會包括完整的腳本文件,也許我沒有做正確的事情...例如theres兩個document.ready東西,這樣可能會導致問題 – 2012-02-08 13:30:16

0

呦我使用的觸摸屏不支持mouseovermouseout

請參閱有關Apple的文檔JavaScript touch events

您可以使用它像:

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