css - 如何为移动设备设计 Accordion 菜单，其中扩展器元素也是链接

Question

我有一个移动设计要实现:

菜单是相当标准的 Accordion 设置。

• 它开始折叠。

• 在 A 上任意位置轻敲将展开它以显示 A子菜单。

• 在 B 上任意位置轻敲会崩溃A并展开 B .

• 在 A Sub 1 上任意位置轻敲会将您带到该链接。

到目前为止所有标准!但附加功能是 A本身就是用户可能想要访问的页面! 我们必须完成这个非常具体的设计，所以我们不能添加扩展器控件，以将链接与扩展分开。

我最初使用的是简单的嵌套 <ul>列表和一些琐碎的 JS 绑定(bind)到 onclick 事件。这对于作为链接或扩展器的元素来说很好，但在两者都是的情况下就分崩离析了。

我尝试更改行为以在悬停时显示子菜单，以利用我发现并记录在此处的行为:Tablets hover on first click, click on second click 这在技术上确实可行，但不是很好:您无法正确滚动菜单，因为在当前扩展之外触摸会更改选择；子菜单的悬停显示不是动画的；它通常不适用于手机，而且在小桌面屏幕上完全无法使用。

我在网上寻找了很多年的示例或库来执行此操作，但没有任何东西符合我的需要，而且我们已经获得了这个非常具体的设计规范。

目前我唯一的解决方案是在 javascript 中自己实现 2 阶段点击，将元素的当前状态存储在数据属性中，并在决定对点击采取什么操作之前读取这些内容。

有没有更好的方法来实现这一点？

=-=-=-=-=-=-=-=-=-=-=-=

有关传统导航栏菜单相关场景的 SO 帖子，请参阅此处:

• Tablets hover on first click, click on second click

• https://stackoverflow.com/questions/29354150/deactivate-hover-on-tablet

Answer 1

你只需要坐在你的电脑前等待大约 50 年后的 react ，届时所有程序都将包括多点触控、语音识别和思维功能，以满足你的功能要求。

根据摩尔定律和互联网上的普遍冷漠，个人经验表明这个问题在不到 5 到 10 年内不会得到解决。