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的高度，因此scorllbars显示出来。我想垂直滚动条自动向下滚动到显示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，可以为滑动添加不同的效果，将fx名称添加到代码中（回答中注释掉的行）

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

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

1 个答案: