如何使用JavaScript创建手风琴盒？

Question

我想要的是：

Start:                        End:
----------------          ----------------
|asdf          |          |              |
----------------          |   stuff      |
                          |              |
                          |              |
                          ----------------
                          |     asdf     |  
                          ----------------

当你点击asdf它应该看起来像End box，但'stuff'框应该逐渐出现，所以看起来asdf框正在拉下东西菜单。当再次点击asdf时，它应该看起来像东西框拉起asdf框并在开始位置结束。

我怎么能这样做？

Answer 1

我意识到这可能比你想要的解决方案更重（或者你根本不想使用jQuery），但你可能想要考虑jQuery UI Accordion。

来自Packt的Dan Wellman的

更新： Here is a pretty detailed jQuery UI Accordion tutorial。

更新2：如果您没有使用jQuery UI，here is a tutorial covering how to build an accordion with just the base jQuery library。

Answer 2

如果由于某种原因你想要重新发明轮子，你需要设置一个定期调用的函数（通过setTimeout（），clearTimeout（）或setInterval（）和clearInterval（）函数来控制通过onclick处理程序建立状态（打开或关闭）后的动画。

然而，绝大多数人只会使用jQuery或其他一个众所周知的JavaScript框架，因此可以节省其他功能领域的时间和精力。