我一直在设计和编码我的网站,但简单的下拉菜单在iPad或iPhone上查看网站时无法正常工作。
我已经找了一些在线解决方案,例如识别用户使用特定设备的jquery片段,但都没有成功。我不确定这是因为这些方法已过时还是因为我做错了(可能是后者)。
相关的网站是http://www.sotomayormac.com,顶部菜单项“我们的思想”通过href=#链接下拉到子菜单。当在iPad / iPhone上轻触时,会出现突出显示(a:hover),但没有子菜单。我相信这是问题的关键部分。
菜单的html代码如下:
我已经找了一些在线解决方案,例如识别用户使用特定设备的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;
// ]]>
ddmenuitem = $(this).find('ul').css('visibility', 'visible');
不应该改变以反映这一点吗?也就是说,将('ul')更改为其他内容..? - Felio Sotomayor$(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);}
针对#ddmenu > li时,是否正常目标为'ul'的ddmenuitem = $(this).find('ul').css('visibility', 'visible');
? - Felio Sotomayor