Question

我正在使用jquerys slideToggle方法，并希望添加一个回调函数，该函数也会向下滚动页面，以便即使新页面显示在页面当前可见区域之外也是可见的。

我发现了几个类似/相同的问题，但我无法使用任何解决方案，我是javascript的新手，所以我真的可以和某人take a quick look at my code.

的Javascript ：

$(document).ready(function() {

    //br is the most efficient way to get desired effect with inline h3's
   $("<br/>").insertBefore("h3");

   //collapse all expandable sections on page load
   $(".expansion_text").slideToggle("slow");
});

//Click for expansion
$(function(){
    $("h3").click( function(){
        $(this).siblings(".expansion_text").slideToggle( "slow", function(){
            if ( $(this).is(":visible") ){
                $("html, body").animate({
                scrollTop: $(this).offset().top
                }, "slow");
            }
        });

    });
});

HTML ：

<div class="expandable">
<h3>The Prisoner of Benda</h3>
<div class="expansion_text">
<p>Bender, I didn't know you liked cooking. That's so cute. The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. This is the worst part. The calm before the battle. Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!</p>  
</div></div>
<div class="expandable">
<h3>Where the Buggalo Roam</h3>
<div class="expansion_text">
<p>Are you crazy? I can't swallow that. Bender, quit destroying the universe! Belligerent and numerous. Can I use the gun?</p>
<ol>
<li>Can we have Bender Burgers again?</li>
<li>I was all of history's great robot actors - Acting Unit 0.8; Thespomat; David Duchovny!</li>
<li>I videotape every customer that comes in here, so that I may blackmail them later.</li>
</ol>
</div></div>

编辑：解决方案，在接受的答案的帮助下达成，但我认为不同，可以在此发布以供将来参考：

//Click for expansion
$(function(){
    $("h3").click( function(){
        toggleExpansion($(this).siblings(".expansion_text"));
    });
});

function toggleExpansion(expandableText){
    expandableText.slideToggle( "slow", function(){
            if ( $(this).is(":visible") ){

                var page = $("#page");

                page.animate({scrollTop: page.scrollTop() +
                    $(this).siblings("h3").position().top},1000);

            }

        });
}

Answer 1

Afaik这不是那么微不足道。最近我遇到了类似的问题，发现了nice solution here。它使用了一个额外但很小的jQuery resize plugin（1KB）。以下是对代码的可能修改：

HTML：

<script type="text/javascript" src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script>

使用Javascript：

$(".expansion_text").css('display','none'); //instead of .slideToggle("slow");

$.resize.delay = 10;
$('.expandable').resize(function(){
    var page = $('#page');
    page.scrollTop(page.scrollTop() + $(this).children('h3:first').position().top);
});

The fiddle is here.

slideToggle后scrollTop无法正常工作

1 个答案: