与移动设备的悬停下拉菜单链接

Question

我发现了一个我似乎无法解决的问题。

我有一个导航，总共 5 个链接。当您将鼠标悬停在其中一个链接上时，它会显示一个下拉菜单，其中会显示另外 3 个链接。

涉及鼠标时很好。但是，当您开始使用触摸设备时，父链接会消耗所有手势和点击，并且查看器会在几分之一秒内显示下拉菜单，然后才会被带到父链接页面。

我想知道是否有一种方法可以使父链接的第一次触摸显示下拉菜单，然后第二次触摸将转到该链接。触摸其他任何东西只会隐藏下拉菜单。

<ul id="main-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a>
        <ul class="sub-menu">
           <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

有人有什么想法吗？ jQuery 将是理想的

Answer 1

也许是这样的？您可能想要自定义下拉菜单的行为，但这显示了在菜单未打开时处理点击事件和防止默认行为（即跟随链接）的基本逻辑：

$(function() {
    $('#main-menu a').click(function(e) {
        var listItem = $(this).closest('li');
        if (!listItem.is('.open')) {
            // Opening drop-down logic here. e.g. adding 'open' class to <li>
            e.preventDefault();
            listItem.addClass('open');
        }
        // Otherwise the default behaviour of the event (clicking the link) will be unaffected
    });
});

Answer 2

我已经为上述问题完成了完整的垃圾箱，也在这里放置了演示链接。

演示： http://codebins.com/bin/4ldqp72

HTML

<ul id="main-menu">
  <li>
    <a href="#">
      Link
    </a>
  </li>
  <li>
    <a href="#">
      Link
    </a>
  </li>
  <li>
    <a href="#">
      Link
    </a>
    <ul class="sub-menu">
      <li>
        <a href="#">
          Sub Link
        </a>
      </li>
      <li>
        <a href="#">
          Sub Link
        </a>
      </li>
      <li>
        <a href="#">
          Sub Link
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      Link
    </a>
  </li>
  <li>
    <a href="#">
      Link
    </a>
  </li>
</ul>

JQuery

$(function() {
    $('ul a').click(function(e) {
        $('#main-menu li').removeClass('open');
        e.preventDefault();
        $(this).closest('li').addClass("open");
        var pos = $(this).closest('li.open').offset();
        $(this).closest('li.open').find("ul.sub-menu").css('top', pos.top + 'px');

    });
});

CSS

#main-menu{
  list-style:none;
  margin:2px;
  padding:2px;
}
li{
  border:1px solid #333;
  background:#ebcdff;
  text-align:center;
  width:100px;
}
li:hover{
  background:#abcdfd;
}
li:hover a{
  color:#ff3322;
}
li a{
  text-decoration:none;
  color:#2466ff;

}
li.open {
  background:#abcdfd;

}
li.open a{
  text-decoration:none;
  color:#ff3322;

}
ul.sub-menu{
  list-style:none;
  display:none;
}
li.open > ul{
  position:absolute;
  left:70px;
  display:block;
}

演示： http://codebins.com/bin/4ldqp72