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而不是填充物，我可以给出一个更具体的答案。

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

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

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

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

Answer 2

试试这个：

$("#coltab li ul").each(function (index) {
  $(this).data('height', $(this).outerHeight());    
});

$("#coltab li").click(function () {

    $("#coltab li ul.open").animate({"top": 0}, function () {
        $(this).removeClass('open');  
    });

    var itemHeight = $(this).children('ul').data('height');
    $(this).find('ul:not(.open)').animate({"top": -itemHeight}).addClass('open');

});

并添加一个新的css类：

#coltab ul.open { display: block; }

Test it here

Answer 3

"-=300px“作为一个预先计算好的变量会感觉更好。(您甚至可以处理字符串中的计算吗？)

此外，如果您希望独立操作它们，我可以想象为您想要处理的部分提供I会容易得多