我一直在設計和編碼我的網站,並且簡單的下拉菜單在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;
// ]]>
嗨感謝您的意見,所以將這些方針的東西是什麼,我找? ((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
我已經更新了我的代碼。 – antyrat 2012-02-08 12:39:28
嗯,它仍然不工作...我會包括完整的腳本文件,也許我沒有做正確的事情...例如theres兩個document.ready東西,這樣可能會導致問題 – 2012-02-08 13:30:16