Question

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

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

涉及鼠标时很好。但是当你开始使用触摸设备时，父链接会消耗所有的手势和点击，并且观看者会在被带到父母的链接页面之前显示下拉片段。[/ p>

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

<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

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

2 个答案: