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

但是如果你“切换”一个项目那么另一个项目（向下滑动）会下降300px而不是向上滑动（加注）300px。 我想要实现的一个好例子（讨厌网站）是http://market.weogeo.com/#/home和底部的“标签”。

我的HTML代码正在使用

 
 
Item 1 
 
This bit needs to toggle up
 
 
 
Item 2 
 
This bit needs to toggle up
 
 
 etc ...  

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

在这里测试一下

Answer 3

“ – = 300px”作为预先计算的变量会感觉更好..（你甚至可以处理字符串中的计算吗？）

此外，如果您希望独立操作它们，我想您可以通过为要处理的部件提供ID来更容易

Answer 4

如果你需要释放ul和li以获得其他东西，你也可以使用不同的方式：

      
 
Item 1
(click me) This first item needs to toggle up 
 
Item 2
(click me) This second item needs to toggle up