gpt4 book ai didi

折叠时的 jQuery 扩展器

转载 作者:行者123 更新时间:2023-12-01 01:01:49 24 4
gpt4 key购买 nike

我正在使用jQuery expander对于多读少读的情况,它工作得很好。我想在用户单击“少读”后将其滚动到文章的标题。我正在尝试弄清楚代码,但我对 jQuery 不太熟悉。

$('.expand_please').expander({
slicePoint: 1000,
widow: 2,
expandEffect: 'show',
userCollapseText: 'Read less',
expandText: 'Read more',
onCollapse: $(this).closest('h2').scroll()
});

编辑:相关 HTML:

<div class="row keyline" id="show_article1">
<h2 style="margin-bottom: 1em;">TITLE</h2>
<div class="link_article" style="display: none;"><a href="/share/thomas/more/18" data-remote="true">READ MORE</a></div>
<div class="fivecol">
<img alt="thumbnail" class="thumbnail" src="/system/thumb.jpg">
</div>
<div class="sevencol last expand_please marginer"><div class="summary" style="display: none;">
ARTICLE BODY TEXT
<span class="read-less"><a href="#">Read less</a></span>
</div>
</div>

最佳答案

要滚动到相关元素,您只需获取其 offset().top 值,并将该值传递给 animate() 方法。

它看起来像这样:

$('.expand_please').expander({
slicePoint: 1000,
widow: 2,
expandEffect: 'show',
userCollapseText: 'Read less',
expandText: 'Read more',
onCollapse: function(){
var amount = $(this).siblings('h2:first').offset().top;
$('body, html').animate({scrollTop : amount},800);

}
});

上面的方法显然会对滚动进行动画,这是一个很好的接触,但是如果您只想要更基本的东西,您可以使用element.scrollIntoView(true);1

就您而言,这将是:

...
onCollapse: function(){
// pass true to align with top of scroll area
// pass false to align with bottom of scroll area
$(this).siblings('h2:first').scrollIntoView(true)
}
...

1 https://developer.mozilla.org/en-US/docs/DOM/element.scrollIntoView

关于折叠时的 jQuery 扩展器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15940043/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com