13

私は Jquery を初めて使用しますが、単純な垂直アコーディオンを作成しました。それは私が必要とする仕事のようですが、スライドダウンの終わりに目に見えるジャークがあります.

誰かがそれを見て解決策を提案できれば、それ以上髪を引っ張るのをやめることができます!

ここに私のテストページへのリンクがあります（すべてのコード[css、jsなど]は簡単にするために1つのファイルにあります）：Vertical Accordion

4

3 に答える 3

16

カスタム コードでは、CSS に小さな変更を加え、アコーディオン内の p タグの高さを指定することで、「ジャンプ」を取り除きました。

スクリプトを介してそれらをすべて非表示にするため、実行する前に:

$(".accordion p:not(:first)").hide();

おそらく、各ピースの計算された高さを調べて取得し、それを各アイテムのスタイルに追加して、最後に得られる「ぎくしゃく」をなくすことができます。

これらの行に沿ったもの：

$('.accordion p').each(function(index) {
   $(this).css('height', $(this).height());
});

編集

あなたのページのコピーをダウンロードしてテストしたところ、いくつかの簡単なブラウザー テストで問題なく動作するように見えたので、修正した vaccordian.js を次に示します。

$(document).ready(function(){   
    $('.accordion p').each(function(index) {
       $(this).css('height', $(this).height());
    });


    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();


    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

TL;DR - アコーディオンの各「開口部」部分に明示的な高さを設定することにより、ぎくしゃくしたアニメーションが削除されます。そのため、スクリプトを介してこれらの高さを設定します。

于 2010-12-07T10:43:45.487 に答える
5

他の誰かがこの問題に遭遇した場合の参考のために、次のことがうまくいきました：

.ui-accordion .ui-accordion-content {
    overflow: auto;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

この修正が機能する理由の詳細を調査する時間はあまりありませんが、とにかく共有したいと思いました。

于 2015-07-02T16:25:12.090 に答える