JQuery Slide Down定位

时间:2014-07-31 08:43:21

标签: jquery html css slide

我在使用JQuery向下滑动功能时遇到问题。我可以让它工作正常但是我滑动的元素的位置会根据视口的大小而改变。我想做的是将它与它滑动的元素联系起来。

This JSfiddle说明了我遇到的问题。我希望.drop元素与.opener元素的右边缘对齐。

CSS

.box {
    position: relative;
}
.box .opener {
    display: block;
    background: #faa;
    line-height: 40px;
}
.box .drop {
    width: 400px;
    position: absolute;
    display: none;
    background: #afa;
    bottom: 40px;
    float: left;
    margin-left: 500px;
} 

的jQuery

$('.opener').click(function(e){
    $('.drop').slideDown();
});

干杯!

2 个答案:

答案 0 :(得分:3)

为什么使用float: left; margin-left: 500px; position: absolute;。你不知道CSS属性?使用right:0;并移除float: left; margin-left: 500px;。像THIS

一样

答案 1 :(得分:0)

我相信这是你想要实现的目标,我只需要删除一些定位。

小提琴:http://jsfiddle.net/YDedH/143/

CSS:

.box .opener {
    display: block;
    background: #faa;
    line-height: 40px;
}
.box .drop {
    display: none;
    background: #afa;
}