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;
});

但是,如果你"切换"一个项目,那么第二个项目(向下滑动)下降300px不会向上滑动(提升)300px.我想要实现的一个好例子(讨厌网站)是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 而不是填充物，我可以给出更具体的答案。

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

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

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

这将导致它向上移动。