我需要在iphone菜单中模拟悬停或mouseup / down,我给出了两个例子。
<ul id="main_nav">
<li><a href="http://google.com">google</a></li>
<li><a href="http://yahoo.com">yahoo</a></li>
<li><a href="#">Three</a>
<ul>
<li><a href="#">sub One</a></li>
<li><a href="#">sub Two</a></li>
</ul>
</li>
<li><a href="#">Four</a></li>
</ul>
//bind the touchstart event to the link element
$('li').live('touchstart touchend', function(e){
$(this).toggleClass('btn-sign-up-hover');
//alert('alert');
});
a {
display:block;
line-height:30px;
}
li{
background:#096;
}
.btn-sign-up-hover {
background: #F3F;
}
这在iphone中无效,
但是以下是工作
//bind the touchstart event to the link element
$('li').live('touchstart', function(e){
$(this).css('background','red');
//alert('alert');
});
$('li').live('touchend', function(e){
$('li').css('background','#096');
//alert('alert');
});
问题是我需要使用toggleClass。
答案 0 :(得分:5)
//bind the touchstart event to the link element
$('li').live('touchstart', function(e){
$(this).addClass('btn-sign-up-hover');
//alert('alert');
});
$('li').live('touchend', function(e){
$('li').removeClass('btn-sign-up-hover');
//alert('alert');
});
希望这会奏效。
答案 1 :(得分:0)
我一直在使用类似于@Sameera Thilakasiri的答案的解决方案,但我遇到的问题是iPad触发2次点击事件 - 一个用于点击的菜单项,一个用于菜单下方的任何内容(z-索引明智)。对我有用的解决方案是触发touchend事件的轻微延迟。希望这有助于某人!
$('.touchHover').bind('touchstart',function(){
$(this).addClass('hovered');
}).bind('touchend',function(){
$t=setTimeout(function(){$(this).removeClass('hovered');},10);
});