jQuery - 垂直向上切换（即不是向下）

我需要创建一个向上而不是向下动画的切换，换句话说，与“正常”切换相反。也许更简单的是，切换应该在菜单项（它是一个菜单）上方向上滑动以变得可见，而不是像普通的 SlideToggle 等那样向下滑动。我已经快到了：

var opened = false;
$("#coltab li").click(function(){
    if(opened){
        $(this).children('ul').animate({"top": "+=300px"});
    } else {
        $(this).children('ul').animate({"top": "-=300px"});
    }
    $(this).children('ul').children().slideToggle('slow');
    $(this).children('ul').toggle();
    opened = opened ? false : true;
});

但是如果你“切换”一个项目，那么另一个项目第二个项目（向下滑动）下降 300 像素，而不是向上滑动（上升）300 像素。我想要实现的一个很好的例子（讨厌这个网站）是http://market.weogeo.com/#/home和底部的“选项卡”。

我的 HTML 代码正在使用

<ul id="#coltab">
<li>Item 1
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
<li>Item 2
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
etc ...
</ul>

在 CSS 方面

ul#coltab { position: relative' blah; blah; }

and

ul#coltab  ul { display: none; position: absolute; blah; blah; }

有任何想法吗？

如果每次“单击”在打开“单击”切换之前关闭前一个切换，那就太好了。

如果您为列表提供实际的 CSS 而不是填充物，我可以给出更具体的答案。

基本上，您需要设置bottom的财产ul#coltab ul to 0.

通用示例： http://jsfiddle.net/s7AD8/

ul#coltab  ul {
    position:absolute;
    bottom:0;
    /*...and so on*/
}

这将导致它以向上的方向动画。