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

我有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的高度移动到顶部”

我该怎么做？希望问题清楚...

最佳答案

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;
}