在iPad/iPhone上放下Jquery/CSS菜单没有响应

Question

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

我环顾四周,试图实现一些在线解决方案,即jquery片段,可识别用户何时使用某种特定设备,但无济于事.我不确定它是否因为这些方法被弃用或因为我做错了(可能是后者)

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

顶部菜单项:"我们的思考"通过href = #link下拉到子菜单.当它在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;
// ]]>

我认为这就是它.我是这种东西的菜鸟,所以任何帮助都会非常感激.它可能正好盯着我,但我无法弄明白!

干杯

所有的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);  
    }
});