slideToggle 후에 scrollTop이 작동하지 않습니다.

Question

jquerys slideToggle 메서드를 사용 중이고 페이지가 스크롤되는 콜백 함수를 추가하여 새로 표시된 텍스트가 현재 보이는 영역의 페이지에서 보이지 않는 경우에도 표시되도록 할 수 있습니다.

나는 몇 가지 비슷한/동일한 질문을 발견하지만 난 솔루션 중 하나가 난 정말 take a quick look at my code.

자바 스크립트에 누군가와 함께 할 수 있도록 나는 자바 스크립트에 새로 온 사람, 일을 가져올 수 없습니다 :

$(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> 

편집 : 솔루션,은 허용 대답의 도움으로 도달하지만 난 나중에 참조 할 수 있도록 여기에 게시 할 정도로 다른 생각이 AFAIK

//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

그렇게 사소한 없습니다. 최근에 비슷한 문제가 발생하여 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> 

자바 스크립트 :

$(".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.