滚动顶部在滑动后不起作用切换

scrollTop not working after slideToggle

本文关键字：不起作用 顶部 滚动      更新时间：2023-09-26

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

我发现了几个相似/相同的问题，但我无法获得任何解决方案，我是javascript的新手，所以我真的可以和某人一起快速浏览我的代码。

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

Afaik 这不是那么微不足道的。最近我遇到了类似的问题，并在这里找到了很好的解决方案。它使用了一个额外的但非常小的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);
});

小提琴在这里。

相关文章：