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

Posted 2023-04-13

【中文标题】下拉 Jquery/CSS 菜单在 iPad/iPhone 上没有响应

【英文标题】：Drop down Jquery/CSS menu not responding on iPad/iPhone

【发布时间】：2012-02-28 21:41:07

【问题描述】：

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

我环顾四周并尝试实施一些在线解决方案，即识别用户何时使用特定类型设备的 jquery sn-ps，但无济于事。我不确定是因为这些方法已被弃用还是因为我做错了（可能是后者）

有问题的网站是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;
// ]]>

【参考方案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);  
    
);

【讨论】：

您好，感谢您的建议，那么我正在寻找类似这些方面的东西吗？ if((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) );

嗯，它仍然无法正常工作...我将包含完整的脚本文件，也许我没有做正确的事情...例如，有两个 document.ready 的东西，所以可能会导致问题

是的

我试图弄清楚这一点，但有些事情让我震惊了......如果我们试图告诉 javascript 在 ipad/iphone 上查看时应该将悬停变成点击，会不会调出 #ddmenu 的 a:hover 是否合乎逻辑？然后 ddmenuitem = $(this).find('ul').css('visibility', 'visible'); 是否应该不被更改以反映这一点？即 ('ul') 到某事..？

好的，我已经做了简单的演示jsfiddle.net/xqfQq。请注意document.onclick = ddmenu_close; 行已被注释！

【参考方案2】：

您使用的是mouseover 和mouseout，它们在触摸屏上不受支持。

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

你可以这样使用它：

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