1

私はjqueryを初めて使用するので、plsは私に耐えます！

下のコードを使用して、その上の画像をクリックすると、テキストを含むdivをスクロールして開きます。これは、画像が画面の下部にある場合を除いて、正常に機能します。次に、テキストを含むdivが開きますが、折り目の下で開きます。つまり、画面を下にスクロールして表示する必要があります。

divが下にスクロールしたときにページを上に移動する、以下のコードに追加する簡単な方法はありますか？そうすれば、ユーザーはテキストを表示するためにページを下にスクロールする必要がなくなりますか？

ありがとう

$(document).ready(function() {
    //Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').next().hide(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').next().slideUp(); //Remove all "active" state and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container

}
    return false; //Prevent the browser jump to the link anchor

});

});
4

1 に答える 1

0

あなたはこれを使うことができます：

デモ： http： //jsfiddle.net/SO_AMK/uecpG/

jQuery：

$(document).ready(function() {
    $('.acc_container').hide();
    $('.acc_trigger:first').next().hide();
    $('.acc_trigger').click(function() {
        if ($(this).next().is(':hidden')) {
            $('.acc_trigger').next().slideUp();
            $(this).toggleClass('active').next().slideDown(400, function() {
                $(document).scrollTop($(this).prev().position().top);
            });
        }
        return false;
    });
});​

アニメーションはないことに注意してください。計算が単純であるよりも所定の高さがある場合、要素の高さは絶えず変化するため、アニメーションを実装するにははるかに多くのコードが必要になります。

于 2012-11-29T14:37:31.807 に答える