0

当我点击toggle按钮时，我想从底部向上#upper滑动。但是，我不能停留在底部，也不能让内容重叠。我怎样才能解决这个问题？#lower#upper

JS 小提琴：http: //jsfiddle.net/4k6du/136/

有问题的页面：http: //keebs.com/sandbox

HTML

<div id="upper">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
</div>

<div id="lower">
    <div id="toggle-div">
    <a href="#" id="toggle">button</a>
    </div>

    <div id="panel">
        <p>Panel - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
    </div>
    <div id="copyright">
        copyright info
    </div>
</div>

CSS

#upper {
    position: relative;
}

#lower {
    width: 90%;
    position: absolute;
    bottom: 0;
}

#toggle-div {
    padding: 10px;
    background:#666;
}

#panel {
    display: none;
/*    height: 100px;*/
    background-color: #aaaaaa;
    padding: 10px;
}
#copyright {
    width:100%;
    background:#222;
    height:40px;
}

JS

$("#toggle").click(function() {
    if ($('#panel').css('display') == 'block') {
        var height = '-=' + $('#panel').height();
    } else {
        var height = '+=' + $('#panel').height();
    }
    $("#panel").slideToggle("slow");
    $("#upper").animate({
        bottom: height
    }, "slow")
});
4

1 回答 1

1

这里的主要目的是让用户知道已经显示了新内容。虽然可以按照您想要的方式实现这一目标，但我建议您尝试一些更简单的方法，如下所示：

http://jsfiddle.net/mDBbE/2/

$('#toggle').click(function(e) {
    e.preventDefault();
    var $el = $('.slide-container');
    if($el.is(':visible'))
    {
        $el.slideUp(300);
    } else {
        $el.slideDown(300);
        scrollToContent($el);
    }
});

function scrollToContent($el) {
    $('html, body').animate({ scrollTop: $el.offset().top }, 600);
}
于 2013-04-20T23:51:54.707 回答