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

I've been designing and coding up my website and the simple drop down menu doesn't work when viewing the site on an iPad or iPhone.

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

I've looked around and tried to implement some of the solutions that are online, ie jquery snippets that recognise when the user is using a particular kind of device, but to no avail. I'm not sure if its because these methods are deprecated or because I'm doing it wrong (probably the latter)

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

The website in question is http://www.sotomayormac.com

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

the top menu item: "Our thinking" drops down to a submenu via a href=# link. This gets highlighted ( a:hover) when its tapped on an iPad/iPhone, but no submenu appears. I'm pretty sure this is a key part of the problem.

顶部菜单项：“我们的思考”通过href = #link下拉到子菜单。当它在iPad / iPhone上轻敲时会突出显示（a：悬停），但不会出现子菜单。我很确定这是问题的关键部分。

html code for the menu is as follows:

菜单的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>

the corresponding CSS:

相应的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;
}

and jquery:

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

I think thats about it. I'm a noob on this kind of stuff so any help would be much appreciated. It's probably staring me right in the face but I cant figure it out!

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

Cheers

干杯

ALL the jscript:

所有的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;
// ]]>

2 个解决方案

#1

iPad/iPhone doesn't support mouseover, mouseout events.

iPad / iPhone不支持鼠标悬停，鼠标移动事件。

You need to use click event or touchstart, touchend for mobile browsers with touchscreen support.

您需要使用点击事件或touchstart，touchend用于支持触摸屏的移动浏览器。

For example for iPad/iPhone device write $('#ddmenu > li').bind('click', ddmenu_open) instead of $('#ddmenu > li').bind('mouseover', ddmenu_open)

例如，对于iPad / iPhone设备，请写$（'#ddmenu> li'）。bind（'click'，ddmenu_open）而不是$（'#ddmenu> li'）。bind（'mouseover'，ddmenu_open）

UPDATE:

更新：

Replace your code:

替换你的代码：

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

to this:

对此：

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

#2

You're using mouseover and mouseout, which are not supported on touch screens.

您正在使用鼠标悬停和鼠标移动，触摸屏不支持。

See the documentation about Apple's JavaScript touch events.

请参阅有关Apple的JavaScript touch事件的文档。

You can use it like that:

你可以像这样使用它：

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

#1