我有一个下拉菜单,用户选择一个位置,然后滚动到div以显示地址(10个不同的位置)。
这在桌面浏览器中运行良好。但是在ipad,iphone和nexus上它因触摸屏而无效。
这是我的代码: -
<html>
<div class="location">
<ul>
<li><a href="">Select an Office</a>
<ul class="officeselect">
<li><a data-emailaddress="" data-address='<span class="address">99 Walnut Tree Close</span>
<span class="address">Guildford</span>
<span class="address">Surrey</span>
<span class="address">GU1 4UQ</span><br>
<span class="address">T: +44 1483 881500</span>
<span class="address"><a href="mailto:info@petroplan.com">info@petroplan.com</a></span>' href="">UK Head</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="span4 alpha">
<div class="addresstitle">
<h3>Address</h3>
</div>
<div class="address">
</div>
</div>
</html>
<script>
// Scroll down to map and address function
$(".location ul li ul a").click(updateAddressDisplay);
function updateAddressDisplay(src) {
$('.office-sel-cont .chooser').text($(this).text());
var target = $(".address");
var source;
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
if (src === null)
source = $(".black-sectors li a.adr-src:eq(0)");
else
source = $(this);
target.fadeOut();
target.html(source.data("address") + source.data("emailaddress"));
target.fadeIn();
var chooser = $(this).parent().parent().parent().find('.chooser');
if (chooser.hasClass('open')) {
chooser.removeClass('open');
chooser.next($('.black-sectors')).animate({
'top': '60px',
'opacity': 0
}, 600, 'easeOutQuint', function() {
chooser.next($('.black-sectors')).toggle();
});
return false;
} else {
}
return false;
}
</script>
我在这个网站上使用了以下内容,但它仍然很狡猾。
<script>
$('.location ul li ul a').on('click touchend', function(e) {
e.preventDefault();
var el = $(this);
var link = el.attr('href');
window.location = link;
});
</script>
感谢您的帮助。
这是小提琴: - http://jsfiddle.net/ScVs9/
答案 0 :(得分:0)
要使您的下拉列表能够在触摸屏设备上运行,您需要使用javascript点击事件而不是css悬停来触发下拉列表。简单的方法是创建一个类,称为.active
,然后使用这样的函数:
$('.location a').on('click', function(){
$('.officeselect').toggleClass('active')
});
活动类只会将可见性设置为可见:
ul.officeselect.active {visibility:visible;}
然后,用户应该能够选择正确的链接并按常规显示地址。
我希望这会有所帮助