2

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

<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，我会很乐意使用它。

提前致谢！

4

1 回答 1

0

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

于 2013-01-29T18:41:47.127 回答