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

Posted 2023-05-08

【中文标题】与移动设备的悬停下拉菜单链接

【英文标题】：Link with hover dropdown menu for Mobile Devices

【发布时间】：2012-09-09 12:15:45

【问题描述】：

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

我有一个导航，总共 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 将是理想的

【参考方案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
    );
);

【讨论】：

再一次，一旦点击它就会删除链接，但一旦应用“打开”就不会重新恢复链接......有这样的事情吗？

Updated previous fiddle 如果链接没有子菜单，则允许链接首次工作

这是否会从下拉菜单中删除悬停功能？这个问题与触摸设备有关，因为“悬停”是很好的桌面。看看这个link。它可以工作，但一旦你点击它就不会隐藏菜单

我的示例根本没有考虑悬停事件。最好让下拉菜单按您希望的方式工作，只需单击事件即可确定它可以在移动设备上工作，然后您应该担心让它在悬停时也能工作（请参阅Continual Improvement）。

【参考方案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

【讨论】：

这似乎停止了所有导航中的所有链接，添加 > 解决了子问题： $('#main-menu > a').click(function(e) 但是，它没有'完成后不要删除 OPEN。