DOM元素活动状态问题(DOM Element Active State Issue)

DOM元素活动状态问题(DOM Element Active State Issue)

我正在尝试实现一种效果，当我点击一个DOM元素，在这种情况下是一个list ，目标list将旋转并保持这种方式。

这有点难以解释，所以这里是我目前正在进行的工作的链接 。

当你长按圆形灰色物体时，菜单列表会慢慢显示出来。 然而，一旦你放手它就会再次消失。

我的目标是在圆形灰色物体上单击一次就会显示菜单并且菜单会保持显示状态。

它很长，所以我只会给你css链接 。

I'm trying to achieve an effect when I click on a DOM element, in this case a list, the target list would rotate and stay that way.

It's kind of hard to explain so here's the link to what I am currently working on.

When you long press on the rounded gray object a list of menu would slowly reveal. However, once you let go it'll disappear again.

The behavior I'm aiming is that clicking just once on the rounded gray object would reveal the menu and that the menu stays revealed.

It's quite long so I'll just give you the css link instead.

最满意答案

从概念上讲，您可以拥有mousedown和mouseup事件的处理程序，以及两者都可访问的计时机制。

在mousedown上，你启动计时机制并启动慢动画。

在鼠标中你也可以

如果mousedown的时间滞后低于某个阈值（即快速点击），则完成动画

结束动画并将菜单返回到未打开状态，如果自moused以来的时滞超过阈值（即点击+保持）

Well after further research and fumbling with css and jquery I finally solved it.

My lack of understanding of css is at fault here.

Bottom line: I just had to override the default state of the DOM element via jquery in order to keep the menu from hiding again once clicked.

You can check the result here.

Thanks for the suggestions though. I appreciate it!