Question

我有一个下拉菜单，用户选择一个位置，然后滚动到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/

Answer 1

要使您的下拉列表能够在触摸屏设备上运行，您需要使用javascript点击事件而不是css悬停来触发下拉列表。简单的方法是创建一个类，称为.active，然后使用这样的函数：

$('.location a').on('click', function(){
    $('.officeselect').toggleClass('active')
});

活动类只会将可见性设置为可见：

ul.officeselect.active {visibility:visible;}

然后，用户应该能够选择正确的链接并按常规显示地址。

我希望这会有所帮助

Jquery菜单在触摸屏设备上没有打开

1 个答案: