jQuery - 垂直向上切换(即不是向下)

Question

我需要创建一个向上而不是向下动画的切换，换句话说，与“正常”切换相反。也许更简单的是，切换应该在菜单项(它是一个菜单)上方向上滑动以变得可见，而不是像普通的 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; }

和

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

有什么想法吗？

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

Answer 1

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

基本上，您需要将 ul#coltab ul 的 bottom 属性设置为 0。

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

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

这将导致它向上移动。