7

私のjqueryアコーディオンに私がやりたいことをさせるのに少し問題がありました。

クリックされているタブをページの上部から一定量のピクセルまでスクロールしたいのですが、ちょっとうまくいきました。ただし、アクティブなタブがクリックされているタブの上にあり、ページがすでに少し下にスクロールされている場合は常に、クリックされたタブの上部とコンテンツの一部がページの上部を超えて上にスクロールされます。

これは私が得たものです：

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300
    });
    $('#accordion h3').bind('click',function(){
        theOffset = $(this).offset();
        $('body,html').animate({ 
            scrollTop: theOffset.top - 100 
        });
    });
});

これが私の問題を説明するためのフィドルです。

たとえば、「セクション 2」を展開し、下にスクロールして「セクション 3」タブをクリックすると、すべてがページからスクロールされますが、他の方法では機能します。

そして、新しいタブを開く前にアクティブなタブを閉じても問題なく動作するので、これは折りたたみタブの高さと関係があると思います。

誰かが助けてくれることを願っています。私はおそらくこれに間違った方法でアプローチしています。私のjqueryスキルは基本的なカットアンドペーストの理解に限定されているため、実際に何をしているのか本当にわかりません! ^^

事前に感謝し、すべてのヘルプとポインタ領域を歓迎します! :)

乾杯

4

2 に答える 2

16

はい、閉じられるタブの高さが問題の原因です。

クリックされた h3 の上部は、その上のタブが折りたたまれているため、すぐに変更されます。

回避策 (おそらく悪い方法) は、折りたたみアニメーションが終了した後にスクロール アニメーションをトリガーすることです。つまり、折りたたみアニメーションが 300 ミリ秒に設定されている場合、310 ミリ秒後にスクロール アニメーションを開始します。

$(function() {
        $("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            active: 0,
            animate: 300 // collapse will take 300ms
        });
        $('#accordion h3').bind('click',function(){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $('body,html').animate({ scrollTop: theOffset.top - 100 });
            }, 310); // ensure the collapse animation is done
        });
});

更新されたフィドル

于 2013-10-26T09:01:49.513 に答える
5

アコーディオンにアクティブな機能を追加できます。そうすれば、他の表示/非表示アニメーションが完了するとトリガーされます。

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300,
        activate: function(event, ui) {
            try {
                theOffset = ui.newHeader.offset();
                $('body,html').animate({ 
                    scrollTop: theOffset.top 
                });
            } catch(err){}
        }
    });
});

開いているアコーディオン タブを折りたたむ場合は、ui.newHeader が定義されていないため、try キャッチが必要です。

于 2015-03-30T23:13:54.460 に答える