Javascript Jquery菜单在触摸屏设备上未打开_Javascript_Jquery_Html_Css

Javascript Jquery菜单在触摸屏设备上未打开

javascript jquery html css

Javascript Jquery菜单在触摸屏设备上未打开,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个下拉菜单，用户在其中选择一个位置，然后滚动到div以显示地址（10个不同的位置）这在桌面浏览器中运行良好。然而，在ipad、iphone和nexus上，由于触摸屏的缘故，它无法工作这是我的代码：- <html> <div class="location"> <ul> <li><a href="">Select an Office</a> <ul class="office

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





'href=”“>英国负责人




地址
//向下滚动至地图和地址功能
$（“.location ul li ul a”）。单击（更新显示）；
函数updateAddressDisplay（src）{
$（'.office sel cont.chooser'）.text（$（this.text（））；
var目标=$（“.address”）；
var源；
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
如果（src==null）
来源=$（“.a.adr-src:eq（0）”）；
其他的
来源=$（本）；
target.fadeOut（）；
html（source.data（“地址”）+source.data（“电子邮件地址”））；
target.fadeIn（）；
var chooser=$（this.parent（）.parent（）.parent（）.find（'.chooser'）；
if（chooser.hasClass（'open'））{
选择器.removeClass（'open'）；
chooser.next（$（'.black sectors'））.animate({
“顶部”：“60px”，
“不透明度”：0
}，600，'easeOutQuint'，函数（）{
chooser.next（$（'.black sectors'））.toggle（）；
});
返回false；
}否则{
}
返回false；
}

我在下面这个网站上用过这个，但它仍然是不可靠的

<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>


$（'location ul li ul a'）。在（'click touchend'，函数（e）上{
e、 预防默认值（）；
var el=$（本）；
var link=el.attr（'href'）；
window.location=链接；
});

谢谢你的帮助

这是小提琴：-

要使下拉列表在触摸屏设备上工作，您需要使用javascript单击事件而不是css悬停触发下拉列表。简单的方法是创建一个名为

.active

的类，然后使用如下函数：

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

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

ul.officeselect.active {visibility:visible;}

然后，用户应该能够选择正确的链接，并按照通常的方式显示地址

我希望这有帮助

这是小提琴：-