向上滑动div的CSS位置

Question

我想将动态生成的 div 直接放置在按钮上方(在页面中较高，而不是 Z-index)。单击按钮时，我想用反向 jQuery slideToggle() 显示 div。

我在 fiddle 中设置了一个例子:http://jsfiddle.net/sablefoste/YWnJE/30/

我很接近，但我似乎无法将显示定位在按钮正上方。我可以使用我的 CSS position:absolute; 让它向上滑动。 left:0;bottom:0; 遵循 http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/ 中的第一个示例.

如果我改变 left:0; bottom:0; 到别的地方，我可以正确定位它，直到调整浏览器窗口的大小。

有没有一种不用蛮力就能做到这一点的方法(具体来说，识别#storiesbutton 的顶部，并使用 jQuery 重新定位 #storylist 的底部)？

我很欣赏任何想法!谢谢!

Answer 1

我在这里纯粹是猜测，但我的意思是您希望菜单显示在按钮上方。我试过使用

var list = $('#storylist'),
    button = $('#storiesbutton'),
    speed = 500;

list.hide().css('bottom', button.css('top'))
    .css('margin-top', list.outerHeight() * -1);

所以故事的位置是根据按钮的位置和列表的高度在加载时设置的。

fiddle :http://jsfiddle.net/qt3LE/

不过正如我所说，我并不是 100% 了解您的需求。这可能有助于定位。

我还使用了 $.toggle(function(){}, function(){}) 而不是 toggleSlide，因为您可以更好地控制各个切换。