如何使用slideUp将元素推到顶部？

Question

我有this代码：

HTML

<div class="box_meteo">
    <div class="box_meteo_pulsanti">
        <a href="javascript:void(0);"
           class="box_meteo_pulsante" id="meteoButton1">Link</a>
    </div>

    <div class="meteo_content">
       Text
    </div>        
</div>

CSS

.box_meteo
{
    width:600px;
    position:relative;
    height:200px;
}

.box_meteo_pulsanti
{
    position:absolute;
    bottom:0px;
    left:0px;
}

a.box_meteo_pulsante
{
    float:left;
    color:#ffffff;    
}

#meteoButton1
{
    width:150px;
    height:24px;
    position:relative;
    z-index:10;
    color:red;
}

.meteo_content
{
    position:absolute;
    bottom:0px;
    width:300px;
    height:180px;
    display:none;
    background-color:#2c2c2c;
    color:#ffffff;
}

的jQuery

$('#meteoButton1').click(function() {
    if ($(".meteo_content").is(":hidden")) {
        $('.meteo_content').slideDown('slow', function() {
            return true;
        });
    } else {
        $('.meteo_content').slideUp('slow', function() {
            return true;
        });
    }
}); 

我想，当我点击Link时，也将该链接移动到顶部，例如div上的“支撑”链接。所以它不能“固定”到底部。 用更少的话来说：“随着div高度的进展将链接移动到顶部”

我该怎么办？希望问题很明确......

Answer 1

Here

您需要将链接和内容放在同一容器中，然后将 修复到底部。当您使用.content为.slideToggle()的高度设置动画时，它会向上推动.toggler链接。

HTML

<div class="toggleBox">
    <a href="#" class="toggler">Link</a>
    <div class="content">
       Text
    </div>    
</div>

的jQuery

$('.toggleBox').each(function() {
    var box = $(this);
    box.find('a.toggler').click(function(e) {
        box.find(".content").slideToggle();

        return false;
        //or e.preventDefault(), depending on whether you want it to bubble
    });
});

CSS

.toggleBox
{
    position:absolute;
    bottom: 0px;
    left: 0px;
    width: 300px;
}

.toggleBox .toggler
{
    height: 24px;
    color: red;
    display: block;
}

.toggleBox .content
{
    height: 180px;
    display: none;
    background-color: #2c2c2c;
    color: #ffffff;
}

Answer 2

像这样：http://jsfiddle.net/XUncm/