构建响应式网站时遇到的一个常见问题是如何制作适用于触摸设备的多级导航菜单（3个或更多级别）。我已经看过很多插件和技术，但是大多数插件和技术都不平整，因为它们不允许第二级页面既作为页面链接又作为子子菜单中子节点的父级。一些技术通过使用箭头图标来公开子菜单项，同时点击父页面名称转到实际页面来解决这个问题...但是在移动设备上这些图标通常是非常小的目标，因此很难使用。是否有任何其他解决方案（jquery或javascript插件，或直接的CSS / JS代码）？
答案 0 :(得分：1)
我有一个起点＆＃39;我用于这样的响应式Web项目的种类。我不确定它是否正是您所需要的，但它允许桌面视图中的多级下拉菜单。在移动视图中，jQuery会自动创建一个非画布菜单。
代码： https://github.com/kthornbloom/Responsive_Template
演示： http://rwd.kthornbloom.com/
希望它有所帮助！
答案 1 :(得分：1)
您是否检查过任何有关触控启动事件的文档？我觉得你会从这种方法中获得最好的ux。在你的位置，我正在使用tap来切换菜单上的类，将显示设置为阻止（例如）。打开菜单后，您可以将另一个触摸事件绑定到子级别对象。
答案 2 :(得分：1)
在我们的评论讨论之后，似乎没有一种直接的方式来获得你想要的东西，因为我们在子菜单打开后不知道用户想要什么。我们无法通过再次单击该项目或折叠子菜单来判断是否要转到链接。
从这一点来说，你有两个选择
菜单打开后创建折叠，用户将知道使用它折叠菜单。如果你认为大多数网站上的尺寸都很小，那就把它做大一些，但是我不认为这会是一个问题，因为它很常见。
为整个菜单创建一个关闭按钮或接近该按钮的按钮。因此，当您单击某个项目时，它将展开，如果再次单击该项目，它将转到该链接。但是，在您单击整个菜单的整体关闭按钮之前，会折叠子菜单。这仅适用于桌面上的平板电脑/手机，这应该是悬停行为。这类似于菜单在http://www.lexus.ca的平板电脑上的行为方式。如果再次单击最顶层的项目，我们实际上会关闭菜单，您可以在手机或平板电脑上看到此行为。如果顶级导航不会导致页面，则这是另一种选择。
答案 3 :(得分：0)