Question

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

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

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

我希望它在正如上面那样定位时正常掉落。我怎么做？我已经读到从底部定位会给它带来效果，但无法在任何地方找到解决方案。

任何帮助都会非常感激。

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

我希望这有帮助！

Answer 2

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

JQuery下降，位置绝对底部

2 个答案: