使用.slideToggle从底部拉出一个隐藏的div

我似乎无法弄清楚如何从下往上显示隐藏的内容，而不是从上到下。 我在这里完成了一些功课，并遇到了来自jQuery UI的解决方案，但必须实现它错误。 非常感谢任何帮助 – 脚本新手。

干杯！

这是我正在使用的

剧本：

$(document).ready(function() { $('#clientsOpen').click(function() { $('#clientsDropDown #clientsDashboard').slideToggle({ direction: "up" }, 300); $(this).toggleClass('clientsClose'); }); // end click }); 

标记：

 
 
 
Let's make something beautiful together...
[e-mail]
 
 
clients
 
 

风格：

 #clientsDropDown { bottom:0; width: 100%; padding-bottom:2%; z-index: 100; } #clientsOpen { background: url("images/open.png") no-repeat scroll 68px 10px #414142; color: #ececec; cursor: pointer; float: left; font-size: 26px; margin: -2px 0 0 10%; padding: 0 15px 2px; text-decoration: none; width: 63px; } #clientsCTA { background:#414142; width:100%; color: #CCCCCC; text-align:center; font-size: 46px; margin: 0; padding: 30px 0; text-decoration: none; } #clientsDropDown .clientsClose { background-image: url(images/close.png); } #clientsDropDown #clientsDashboard { display: none; } 

Answer 1

只需添加position:absolute; 到#clientsDropDown 。

jsFiddle示例

或者，如果您希望“客户”位于弹出窗口顶部，请移除浮动并将段落放在仪表板div上方，就像在此jsFiddle示例中一样 。

Answer 2

尝试将脚本更改为：

 $("#clientsOpen").click(function(){ $("#clientsDashboard").slideToggle(); }, function(){ $("#clientsDashboard").slideToggle(); }); 

是的，当然将容器div定位为绝对值。

Answer 3

改变揭示动画方向的实际属性是bottom CSS属性。 如果它被改为top ，动画将显示向下而不是向上。

在前面提供的小提琴中尝试#clientsDropDown ，你会看到它在行动。