jQuery - SlideToggle，带有关闭按钮的页面滚动？

Question

我是 jQuery 新手。我正在使用 .slideToggle 使 DIV 出现在所有内容的底部。我已经获得了使 DIV 出现的代码，以及向下滚动到该 DIV 的页面。

但是，我想制作一个额外的按钮/链接，然后隐藏内容并向上滚动。

我获得的代码允许我完成所有这些操作，但只有一个链接可以切换显示和隐藏，这不是很有用，因为我现在需要将隐藏链接置于所有内容的底部。

如果您对如何执行此操作有任何想法，请告诉我。

jQuery 代码

var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
    $('#slickbox').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + height }, 3200);
    return false;
}, function() {
    $('#slickbox').slideUp(3200);
    $('html, body').animate({ scrollTop: '-=' + height }, 3200);
    return false;
});

HTML

<div style="height: 300px; border: solid 1px #ddd;">I'm using space!</div>
<div class="donate done">
    <h3 class="more"><a href="#" title="More"> More </a></h3>
</div>
<div id="slickbox">
    <div id="slide_show">
        <div id="slider">
            <ul>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" />
                </li>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" />
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="close">
    <h3 class="more"><a href="#" title="More">Close</a></h3>
</div>

以下是我到目前为止所得到的示例： http://jsfiddle.net/eMYJx/ 47/

当您单击“更多”按钮时，所有内容都会按照我想要的方式下降和滚动。但是当你按下关闭按钮时，你必须按两次。有什么办法可以解决这个问题吗？

Answer 1

我会这样做。使用一个可在“更多”/“关闭”之间切换的链接。我使用动画回调来进行切换。

http://jsfiddle.net/eMYJx/49/

var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
    var $this = $(this);
    $('#slickbox').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + height }, 3200, function() {
         $this.html('Close');
    });     
    return false;
}, function() {
    var $this = $(this);
    $('#slickbox').slideUp(3200);
    $('html, body').animate({ scrollTop: '-=' + height }, 3200, function(){
        $this.html('More');
    });
    $(this).html('More');
    return false;
});

或者，如果您想保留这两个按钮，您可以将单独的处理程序绑定到每个处理程序。两者都用于单击，但一个“更多”将执行切换代码的​​第一部分，“关闭”将执行后半部分。