JQuery 下拉位置绝对底部

Question

我正在尝试在 JQuery 中创建一个 slideToggle 效果。我有一个 div，其定位为:

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

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

我希望它在如上定位时从 TOP 正常下降。我怎么做？我读过从底部定位可以产生这种效果，但无法在任何地方找到解决方案。

任何帮助将不胜感激。

Answer 1

您可以结合使用函数和窗口 resize 事件，使用 CSS top 属性将 div 动态定位到距底部 100px 的位置，以便 slideToggle () 按照您想要的方式操作:

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

DEMO HERE

希望对您有所帮助!