智能手机上的 HTML 菜单行为

Question

目前正在尝试制作一个响应智能手机和平板电脑的网站。我在网站的菜单上遇到了一些麻烦。菜单基本上是一个像这样的无序列表：

<ul class="navigation">
    <li><a href="page1.html">Page1</a></li>
    <li><a href="page2.html">Page2</a></li>
    <li>
        <a href="page3.html">Page3</a>
        <!-- Dropdown menu -->
        <ul class="subnav">
            <li><a href="page4.html">Page4</a></li>
        </ul>
    </li>      
</ul>

内部无序列表是当用户悬停page3.html 链接时出现的下拉菜单。

在手机和平​​板电脑上，我希望菜单像手风琴一样，所以当用户触摸page3.html 链接时，subnav 列表会出现并将其他列表项向下推。我只需将下拉列表设置为固定位置而不是position:absolute;，就可以在桌面上使用它。但是，在移动设备和平板电脑上，page3.html 上的触摸仍然可以作为链接使用，因此用户当然是，重定向到page3.html 而不是触发subnav 列表。

有什么方法可以在用户第一次触摸它时触发子导航列表而不触发链接？ :-) 我正在尝试使用纯 CSS 解决方案，但如果需要 JS，我会很乐意使用它。

提前致谢！

Answer 1

有一个用 jQuery (Black Studio Touch Dropdown Menu) 编写的 Wordpress 插件，几乎可以满足您的需求。您可以查看源代码 here 并修改为独立于 Wordpress，如果这不是您正在使用的。它基本上检查设备是否是触摸屏设备，如果是，当您单击下拉菜单的父级时，它会展开它而不是单击链接。下一次，它会真正点击链接。