jQuery-垂直向上切换(即不向下) [英] jQuery - vertical up toggle (i.e. not down)

问题描述

我需要创建一个向上而不是向下动画的切换，换句话说就是正常"切换的相反方向.也许更简单的是，切换按钮应该向上滑动到菜单项(这是一个菜单)上方才能显示出来，而不是像普通的slideToggle等那样向下滑动.我几乎就在这里:

I need to create a toggle that animates upwards not downwards in other words the reverse of the "normal" toggle. Perhaps simpler is the toggle should slide up above the menu item (it's a menu) to become visible rather than slide down as the normal slideToggle etc. would do. I am nearly there with this :

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像素，而不向上(上升)滑动300px.我要实现的一个很好的示例(讨厌该网站)是 http://market.weogeo.com /#/home 和底部的标签".

BUT if you "toggle" an item THEN another item the second item (slides down) falls by the 300px NOT slide up (raises) by 300px. A good example (hate the site) of what I want to achieve is http://market.weogeo.com/#/home and the "tabs"at the bottom.

我的HTML代码正在使用

My HTML code is using

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

有什么想法吗?

如果每个点击"按钮在打开被点击的"开关之前都关闭了上一个开关，那就太好了.

It would be nice if each "click" closed the previous toggle before opening the "clicked" toggle.

推荐答案

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

I could give a more specific answer if you would have provided the actual CSS for your lists instead of filler.

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

Basically, you'll want to set the bottom property of ul#coltab ul to 0.

常规示例: http://jsfiddle.net/s7AD8/

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

这将使其向上动画.

这篇关于jQuery-垂直向上切换(即不向下)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！