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