Javascript 触摸设备上的CSS li下拉列表

编辑：谢谢你的回答。这些建议是否保持了li:hover下拉菜单的工作状态，只是为触摸设备添加了onclick功能？我不希望桌面用户必须点击，菜单应该显示在：为他们悬停

我在这个问题上做了研究，但似乎找不到好的解决办法

我的网站

有问题的菜单是顶部导航栏中的“联赛信息”和“结果”

我的CSS下拉菜单在li:hover时激活（li项不是链接，我更改了光标，使其显示为手，但单击将不起任何作用）

然而，显然这在触摸设备上不起作用

有没有办法维持我目前在非触摸设备上使用li:hover的设置，但添加一些javascript来启用触摸屏设备的功能

HTML

---

正如您所知，触摸设备不受支持悬停效果

你可以使用一些插件，比如

Modernizer.js

我在网上看到的另一个解决方案是：

div#menu ul li:hover ul

需要变为

div#menu ul li:active ul

，以便it在触摸设备上响应，因为它们不支持悬停状态

我为您提供的具体解决方案是：

---

使用Modernizer，您可以将触摸设备作为目标，因此将其包含在代码中，然后：

JS部分：

if(Modernizr.touch){
  $('.hasDropDown').click(function(){
    $(this).find('.drop').addClass('visible');

  });
}

<div id="link_bar">
    <ul>
        <li class="hasDropDown">League Info
            <ul class="drop">
                <li><a href="team_directory.php">Team Directory</a></li>
                <li><a href="fixtures.html">Fixtures</a></li>
                <li><a href="league_rules.html">Rules</a></li>
                <li><a href="public_umpires.php">Umpire Directory</a></li>
            </ul>
        </li>
   </ul>
</div>

HTML部分：

if(Modernizr.touch){
  $('.hasDropDown').click(function(){
    $(this).find('.drop').addClass('visible');

  });
}

<div id="link_bar">
    <ul>
        <li class="hasDropDown">League Info
            <ul class="drop">
                <li><a href="team_directory.php">Team Directory</a></li>
                <li><a href="fixtures.html">Fixtures</a></li>
                <li><a href="league_rules.html">Rules</a></li>
                <li><a href="public_umpires.php">Umpire Directory</a></li>
            </ul>
        </li>
   </ul>
</div>

---

这很奇怪，大多数触摸设备都模拟悬停事件。

看看有很多触摸事件可用于实现您所需的功能。有一个名为hoverintent的jquery插件，它非常适合这样做

.visible {
  display: block;
}