0

jquerys slideToggle メソッドを使用していますが、ページを下にスクロールするコールバック関数を追加して、新しく展開されたテキストがページの現在の表示領域から外れた場合でも表示されるようにしたいと考えています。

私はいくつかの類似/同一の質問を見つけましたが、どの解決策も機能させることができませんでした。

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);

            }

        });
}
4

1 に答える 1

1

これはそれほど些細なことではありません。最近、私は同様の問題に遭遇し、ここで良い解決策を見つけました。追加の 1 つの非常に小さなjQuery サイズ変更プラグイン(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);
});

フィドルはここにあります。

于 2012-08-08T21:30:42.033 に答える