$(document).ready(function(){
$(function(){
$(".content").hide();
$('.more-btn').click(function( e ){
e.stopPropagation(); // to lower "DOM layers"
$(this).closest('section').find('.content').show(500, 'swing'), $('body').css('cursor','help'),$.scrollTo('.content', 800, {offset:-50, easing:'easeInOutBack'} );
$(this).hide();
});
这工作正常,我的问题是我可以弄清楚如何专门选择这个内容路径
$(this).closest('section').find('.content')
在这里面
$.scrollTo('.content', 800, {offset:-50, easing:'easeInOutBack'} );
似乎在使用 scrollTo 插件示例时我不能只使用普通的选择字符串
$.scrollTo($(this).closest('section').find('.content'), 800, {offset:-50, easing:'easeInOutBack'} );
我觉得在插件中使用选择器需要不同的编写方式,如果我错了,请纠正我?
我应该告诉你我正在尝试滚动到最近的内容部分,具体取决于按下哪个按钮。
html是
<section>
<article class="toggle-box" id="toggle1">
<aside class="info-rollover">
<h3>Locavores</h3>
<button class="more-btn">Show More</button>
</aside>
</article>
<aside class="content">
<img src="images/loca/1.jpg"/>
<img src="images/loca/2.jpg"/>
<img src="images/loca/3.jpg"/>
<img src="images/loca/4.jpg"/>
<img src="images/loca/5.jpg"/>
<img src="images/loca/6.jpg"/>
<img src="images/loca/7.jpg"/>
<img src="images/loca/8.jpg"/>
<img src="images/loca/9.jpg"/>
</aside>
</section>