Css 如何为手机设计手风琴菜单，其中扩展器元素也是链接

我有一个手机设计来实现：

菜单是相当标准的手风琴设置

• 它开始崩溃

• 点击

  A

  上的任意位置将展开它以显示

  A

  子菜单

• 点击

  B

  上的任意位置将折叠

  A

  并展开

  B

• 轻触Sub 1上的任何位置将带您进入该链接

到目前为止都是标准的！但是另一个特性是

A

本身就是用户可能想要访问的页面！ 我们必须完成这个非常具体的设计，所以我们不能添加扩展器控件，以将链接与扩展分开

我最初使用简单的嵌套

列表和一些琐碎的JS绑定到onclick事件中。这对于作为链接或扩展器的元素来说是很好的，但是在同时作为链接或扩展器的位上会出现崩溃

我尝试将行为更改为在悬停时显示子菜单，以利用我发现并记录在此处的行为： 这在技术上是可行的，但不是很好：你不能正确地滚动菜单，因为触摸当前扩展之外的内容会改变选择；子菜单的悬停曝光未设置动画；它通常不适用于手机，在桌面小屏幕上完全无法使用

我在网上找了很久，想找一个例子或一个库来做这个，但是没有什么适合我的需要，我们已经得到了这个非常具体的设计规范

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

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

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

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

---

大约50年后，您只需坐在电脑前观察响应，所有程序都将包括多点触摸、语音识别和思维功能，以满足您的功能要求

---

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

这听起来更像是一个评论，而不是一个答案。请删除此答案并将其移至评论部分。同上。这并不是在讨论（或任何未来的讨论）中添加任何内容。