iPad/iPhone上下拉式Jquery/CSS菜单无响应

Question

iPad/iPhone上下拉式Jquery/CSS菜单无响应

5

我一直在设计和编码我的网站，但简单的下拉菜单在iPad或iPhone上查看网站时无法正常工作。

我已经找了一些在线解决方案，例如识别用户使用特定设备的jquery片段，但都没有成功。我不确定这是因为这些方法已过时还是因为我做错了（可能是后者）。

相关的网站是http://www.sotomayormac.com，顶部菜单项“我们的思想”通过href=#链接下拉到子菜单。当在iPad / iPhone上轻触时，会出现突出显示（a：hover），但没有子菜单。我相信这是问题的关键部分。

菜单的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;
// ]]>

- Felio Sotomayor

2个回答

0

您正在使用mouseover和mouseout，这些事件在触摸屏上不受支持。

请参阅有关苹果公司JavaScript触摸事件的文档。

您可以像这样使用它：

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

- Mariusz Jamro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- antyrat · Accepted Answer

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