Question

我在div #frame

中有一个div #up和div #middle

使用css：

#frame{
    position: absolute;
    left:200;
    top:200;
    border-style: solid;
    border-width: 1px;
}

#middle{
    width:200px;
    height:200px;

}

#up{
    position:absolute;
    bottom:200;
    display:none;
}

当我点击#middle时，我使用jQuery代码从下到上滑动#up：

$('#middle').click(function () {
    $('#up').slideToggle();
});

这里有一个jsFiddle：http://jsfiddle.net/malamine_kebe/DCSuR/

我的问题：当#up是slideToggling

时，我怎样才能滑动切换#frame的边框顶部

Answer 1

UPDATED FIDDLE

您无法使用position: absolute;

的内部div切换元素的边框

看看演示，我已将#up的边框添加到底部的所有边，并使用#middle

使此div覆盖父级（bottom: 201px;）

更新2：我不确定您是否需要像this

这样的标签效果

或者像@Danko那样link

Answer 2

我只是一个CSS问题。当您使用position: absolute时，元素可以在不更改父框架的情况下转到外部。因此，如果您更改为position: relative，它将有效。

#up{
    position:relative;
    top: 0;
    display:none;
}

Updated Fiddle

Answer 3

我想这可能是......

var i = 0;
$('#middle').click(function () {
    var tp = i % 2 === 0 ? $(this).offset().top - $('#up').height() : $(this).offset().top - 2;
    $('#frame').animate({
        top: tp
    });
    $('#up').slideToggle();
    i++;
});

FIDDLE

Answer 4

检查这是否回答了您的问题。更新JAVASCRIPT

$('#middle').click(function () {
    $('#up').slideToggle(function(){
      $('#frame').css("borderTop","2px solid #000");  
    });
});

AND UPDATE CSS

#up{
    position:absolute;
    bottom:200px;
    display:none;
    border-top: 2px solid black;
}

使用slidetoggle（）的jquery问题

4 个答案: