1

Bootstrap で構築されたサイトにたくさんのアコーディオンがあります。アコーディオンの折りたたみが完了すると、ページが開いているパネルにスクロールする動作を追加しようとしています。IE を除くすべてのブラウザで動作します (もちろん!)。ここに私が書いた関数があります：

$('.accordion').on('hidden', function() {
    $('.accordion .current').removeClass('current');
    $(this).find('.in').prev().find('a').addClass('current');
    $('html,body').animate({'scrollTop':$('.accordion-toggle.current').position().top},500);
})

IE は、新しく作成された「現在の」アイテムの position() プロパティが未定義であると言います。$('.current') でアラートを実行し、[object Object] を報告したため、オブジェクトがそこにあることはわかっていますが、その位置を見つけることができないようです。この関数の実行キューと関係がありますか? まだ存在しないオブジェクトの位置を探していますか? ここで髪をかきむしる！

HTML:

<div id="accordion" class="accordion"> 
    <div class="accordion-group"> 
        <div class="accordion-heading"> 
            <a class="accordion-toggle" href="#collapseOne" data-parent="#accordion" data-toggle="collapse">Panel 1</a>
        </div> 
        <div id="collapseOne" class="accordion-body collapse"> 
            <div class="accordion-inner"> 
            <!-- Content goes here --> 
            </div> 
        </div> 
   </div> 
</div>

@クリス・ホレベック...

現在開いているペインまでスクロールしたい。Bootstrap では、そのための自動プロビジョニングはありません。見出しにはクラスを追加しませんが、その下のペインに追加します。ウィンドウにも見出しが表示されるようにします。私は間違っているかもしれませんが、それが私がやろうとしていることであり、同じことを繰り返す危険を冒して、IE を除く他のすべてのブラウザーで動作します。

これは、私がやろうとしていることを示すフィドルです。IE で実行すると、動作しないことがわかります。

4

1 に答える 1

0

問題はこの部分です。

$(this).find('.in').prev().find('a').addClass('current');

動作しない理由.prev()は、IE で動作しないためです。したがって、このため、使用しているセレクターを認識していませんscrollTop:

これが、このエラーが発生する理由です。

SCRIPT5007: Unable to get value of the property 'top': object is null or undefined

http://bugs.jquery.com/ticket/2590

このバグはかなり古いものですが、修正されないように設定されているため、修正されていないと思います。

私の提案は、そのセレクターに到達する別の方法を見つけることです。私は個人的にクラスを親コンテナに設定しaccordion-headingます。

何かのようなもの：

$('.accordion-toggle').click(function(){
   $(this).parent('.accordion-heading').addClass('open');
});

そして、次を使用します。

 $('html,body').animate({'scrollTop':$('.accordion-heading.open').position().top},500);
于 2013-02-28T20:22:16.413 に答える