Question

基于CSS类构建一个简单的Multilevel推送菜单，它没有javascript动画，可以在CSS转换/转换上运行。除了切换is-open类之外，它在每个部分都能正常工作。

当用户点击链接时，应首先删除.is-open类。然后添加它以便动画激活。
如果我说在第二阶段将.is-open类更改为.addClass("foo");，则删除.is-open类并添加.foo类没有问题。所以我想知道这段代码的问题是什么。

在演示中，您会发现没有submenu的菜单什么都没有加载。这是正确的行为。我遇到的问题是我想在打开一个新菜单之前关闭菜单。因此，删除.is-open类，然后再次应用它。

e.g

链接1,4,7没有子菜单，所以在click/touch上打开没有任何内容，单击菜单按钮将不会发生任何事情。这是正确的行为。

链接2,3,5,6有子菜单，因此点击/触摸时会打开，菜单按钮会切换菜单以打开/关闭。

希望有人可以指出我做错的方向。感谢。

Answer 1

您应该使用transitionend事件。这样你就可以在添加＆＃39; is-open＆＃39;之前听完动画。课程回到侧边栏和内容。例如：

sidebar.one('transitionend', function() {
    sidebar.addClass("is-open");
    content.addClass("is-open");
});

现在，我所拥有的并不完美，但我相信它传达了这个概念：http://jsbin.com/EjUQ/9