javascript - .slideToggle 自动向下滚动以显示内容

Question

当用户单击链接时，我使用 .slideToggle 打开面板:

<script type="text/javascript"> 
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); 

return false;
});
});
</script> 

切换的 div (#panel) 的内容高于包含的 div 的高度，因此会显示滚动条。我希望垂直滚动条在 div 切换时自动向下滚动以显示新内容。我想我可以用 .scrollTop 来实现这一点，但我不确定如何同时实现它......有什么想法吗？

编辑: 人们似乎一致认为这是实现我所描述的目标的最佳方式:

<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        var $panel = $("#panel");
        $panel.slideToggle("slow");
        if ($panel.is(':visible')){
            $panel.parent().scrollTop($panel.height()-$panel.parent().height());
        }
        $(this).toggleClass("active"); 

        return false;
    });
});
</script>

这使得面板滑动，但向下滚动效果不起作用..

Answer 1

我以前做过类似的事情:

   $(".btn-slide").click(function(event){

    if ( $(this).hasClass("active"))
    {
         $(this).removeClass("active");
         $("#panel").slideUp("slow");
    }
    else
    {
         $(this).addClass("active");
         $("#panel").slideDown("slow");

         var destination = $("#container ").offset().top + $("#container").height();


         $("#container").animate({ scrollTop: destination},"slow");
         //or
         //$("#container").animate({ scrollTop: destination},"slow", "fx_name_here");

    }


    event.preventDefault();
});

HTML:

<a href="#" class="btn-slide">Fire Panel</a>
<div id="container">
    <div id="panel">sdfsdfsdfs</div>
</div>

这对你有帮助吗？

编辑:

如果您下载 jQuery Easing Plugin您可以向滑动添加不同的效果，将效果名称添加到代码中(答案中注释掉的行)

改进了代码，代码更少但效果相同。