在iPadiPhone上放下JqueryCSS菜单没有响应

概述我一直在设计和编码我的网站,当在iPad或iPhone上查看网站时,简单的下拉菜单不起作用. 我环顾四周,试图实现一些在线解决方案,即jquery片段,可识别用户何时使用某种特定设备,但无济于事.我不确定它是否因为这些方法被弃用或因为我做错了(可能是后者) 有问题的网站是http://www.sotomayormac.com 顶部菜单项：“我们的思考”通过href = #link下拉到子菜单.当它 我一直在设计和编码我的网站,当在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',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;// ]]>

解决方法 iPad / iPhone不支持鼠标悬停,鼠标移动事件.

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

例如,对于iPad / iPhone设备,请写$(‘#ddmenu> li’).bind(‘click’,ddmenu_open)而不是$(‘#ddmenu> li’).bind(‘mouSEOver’,ddmenu_open)

更新：

替换你的代码：

$(document).ready(function(){    $('#ddmenu > li').bind('mouSEOver',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);      }});

总结

以上是内存溢出为你收集整理的在iPad / iPhone上放下Jquery / CSS菜单没有响应全部内容，希望文章能够帮你解决在iPad / iPhone上放下Jquery / CSS菜单没有响应所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。