我是如何为触觉设备启用下拉菜单的

How did I just enabled my dropdown menu for tactile devices?

本文关键字:启用 下拉菜单      更新时间:2023-12-15

我为桌面访问者提供了一个下拉菜单,HTML看起来如下:

<ul id="nav">
  <li class="nav_header "><span class="main_menu_title">SERVICES</span>
    <ul class="nav_header_inner">
        <li><a href="/services/massage">Massage</a></li>
        <li><a href="/services/therapy">Therapy</a></li>
        <li><a href="/services/kindness">Kindness</a></li>
    </ul>
  </li>
</ul>

通过将鼠标悬停在li.nav_header上,ul.nav_header_inner将获得visible

显然,悬停在触觉设备上不起作用。点击li.nav_header也没有任何作用。

为了实现这一点,我开始做一个js函数,如下所示:

function tappableMenu() {
  jQuery("li.nav_header").click(function() {
  });
}

只有那个代码,点击它就可以看到下拉列表。

这怎么可能

您可以使用此函数

$(function() {
      jQuery("li.nav_header").click(function() {
      $('.nav_header_inner').slideToggle(500);
  });
});

以下是示例