JQuery下拉列表，位置为绝对底部

Question

我正在尝试在JQuery中创建一个slideToggle效果。我有一个div，它的位置是：

someDiv {
   position : absolute;
   bottom : 100px; 
}

现在，当单击触发函数( $("#someDiv").slideToggle(); )时，div将从底部向上滑动，而不是显示或向下滑动。

我希望它从顶部正常下降，而它的位置如上所述。我该怎么做？我读到过，从底部定位会产生这种效果，但在任何地方都找不到解决方案。

任何帮助都将不胜感激。

Answer 1

可以将函数与window resize事件结合使用，以便使用CSS top属性从底部动态定位slideToggle() 100px，以便div按您所需的方式运行：

CSS

#theDiv {
  position : absolute;
}​

HTML

<button>Toggle</button>
<div id="theDiv">...<div>​

JS

// Positions Div From Bottom //
function positionDiv($target, fromBottom){
    $target.css({
        top: $(window).height() - fromBottom
    });
}

// Bind positionDiv() to Window Resize and Trigger at Start //
$(window).resize(function(){
    positionDiv($('#theDiv'), 100);
}).trigger('resize');

// Bind Toggle to Button //
$('button').on('click', function(){
    $('#theDiv').slideToggle();
});​

我希望这能帮到你!

Answer 2

这个怎么样？http://jsfiddle.net/fZGGG/6/