jQuery - 垂直向上切换（即不向下）
Posted
技术标签:
【中文标题】jQuery - 垂直向上切换（即不向下）【英文标题】：jQuery - vertical up toggle (i.e. not down) 【发布时间】：2011-01-01 15:24:16 【问题描述】：我需要创建一个向上而不是向下动画的切换，换句话说，与“正常”切换相反。也许更简单的是切换应该在菜单项（它是一个菜单）上方滑动以变得可见，而不是像正常的 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;
有什么想法吗？
如果每次“点击”在打开“点击”开关之前关闭前一个开关，那就太好了。
【问题讨论】：
这是我在下面发布的编辑版本：D jsfiddle.net/s7AD8/2 @Cristy Ohhh 我恨你 :-) 那是“正确的”以及我“创造”的很多东西，但我只需使用 slideToggle 就能让它工作 - 不需要动画 - 除非我错过了什么？ 是的，不需要动画，我只是使用它，因为下面发布的示例使用它:)) 【参考方案1】：如果您为列表提供实际的 CSS 而不是填充符，我可以给出更具体的答案。
基本上，您需要将ul#coltab ul 的bottom 属性设置为0。
通用示例： http://jsfiddle.net/s7AD8/
ul#coltab ul
position:absolute;
bottom:0;
/*...and so on*/
这将使它向上动画。
【讨论】：
@patrick dw - 抱歉，这个职位是绝对的；底部：0px; @Russell：应该可以。我添加了一个通用示例来演示向上动画。如果您的bottom:0 没有这样做，那么您需要提供重现问题所需的代码。
@patrick dw - 感谢“去过那里” li>功能Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Pellentesque sed neque eu est consequat scelerisque sit amet ac orci。
博客Lorem ipsum dolor sit amet, consectetur adipiscing elit.
ul#coltab ul 显示：无；位置：绝对； z指数：998；边距：0px；底部：0px；填充：0px；列表样式：无；
@patrick dw - 继续... ul#coltab li ul li.test 位置：相对； line-height: normal; 它不是说“向上”切换不起作用，如果您切换“两次”，即切换项目已经打开，那么 JQuery 会“反转”代码
在我 (ofc) 之前得到它，但我自己做了，作为概念证明。 :) jsfiddle.net/66YCv【参考方案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
【讨论】：
我看过 .data('');之前但不确定它是什么，但从你的例子我可以猜到它计算“内容”或数据的高度，但即使 css 不显示？ 查看文档：api.jquery.com/jQuery.data - “存储与指定元素关联的任意数据。” |所以这段代码 sn-p 存储了需要切换的项目的原始高度，以便稍后动画到适当的顶部位置。【参考方案3】："-=300px" 作为一个预先计算的变量会感觉更好。（你甚至可以处理字符串中的计算吗？）
此外，如果您希望独立操作它们，我想您可以通过为要处理的部分提供 ID 来轻松得多
【讨论】：
yes +/-=300px 作为预先计算的 var 会更好，但是由于 UL 在切换之前显示为 none，所以它没有高度，所以你（好吧，我做不到）height();预先计算它如果可以做到 - 通常 - 很想知道和学习。谢谢评论 “你甚至可以处理字符串中的计算吗？” 是的，jQuery 可以让你在动画中做到这一点。 @Patrick：我明白了...这确实为我的项目提供了一些新选择^^谢谢【参考方案4】：如果你需要释放 ul 和 li 做其他事情，你也可以使用不同的方式：
<style>
body margin: 100px 50px;
#coltab position: relative; text-align: center;
#coltab > li
background: #ccc;
color: #444;
cursor: pointer;
display: block;
float: left;
margin: 0 10px;
padding: 10px 20px;
position: relative;
width: 100px;
#coltab span
background: #eee;
color: #222;
display: none;
padding: 5px;
position: absolute;
left: 0;
right; 0;
top: 0;
z-index: -1;
#coltab span.open display: block;
</style>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"> </script>
</head>
<body>
<div id="coltab">
<li>Item 1<br/>(click me)
<span>This first item needs to toggle up</span>
</li>
<li>Item 2<br/>(click me)
<span>This second item needs to toggle up</span>
</li>
</div>
<script>
$(document).ready(function()
$("#coltab li span").each(function (index)
$(this).data('height', $(this).outerHeight());
);
$("#coltab li").click(function ()
$("#coltab li span.open").animate("top": 0, function ()
$(this).removeClass('open');
);
var itemHeight = $(this).children('span').data('height');
$(this).find('span:not(.open)').animate("top": -itemHeight).addClass('open');
);
);
</script>
</body>
【讨论】：
以上是关于jQuery - 垂直向上切换（即不向下）的主要内容，如果未能解决你的问题，请参考以下文章
底部固定 div 的 JQuery 切换将所有 div 向上移动