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

Question

编辑:感谢您的回答。这些建议是否让 li:hover 下拉列表正常工作，只是为触摸设备添加 onclick 功能？我不希望桌面用户必须点击，菜单应该出现在:为他们悬停。

我已经对这个主题进行了研究，但似乎找不到好的解决方案。

我的网站 http://www.eastbournenl.com

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

我的 CSS 下拉菜单在 li:hover 上激活(li 项不是链接，我更改了光标使其显示为一只手，但单击将无处可去)。

但是，显然这不适用于触摸设备。

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

HTML

<div id="link_bar">
    <ul>
        <li>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>

和 CSS

#link_bar ul ul {
    display: none
}

#link_bar ul li:hover > ul {
    display: block
}

#link_bar ul:after {
    content: "";
    clear:both;
    display:block
}

#link_bar ul ul {
    position: absolute;  
    top: 1em; 
    width: 10em; 
    padding-top: 1em; 
    margin-left: 0;
}

#link_bar ul ul li {float:none ; position: relative ; padding: 1em 1em 1em 0}
#link_bar ul ul li {width:100%}

#link_bar .drop li:hover a {color: #99FF33}

Answer 1

使用 Modernizr，您可以定位触摸设备，因此将其包含在您的代码中，然后:

JS部分:

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

  });
}

HTML 部分:

<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>

CSS:

.visible {
  display: block;
}

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