0

このアコーディオンが機能しない理由を誰かに教えてもらえますか？

ajax呼び出しは正常に機能し、アコーディオンdivはaccordion2 divと同じ構造で作成されます（アコーディオンが機能していることを確認するためにあります！）

divは適切なクラスで装飾されます。

<div id=​"accordion" class=​"ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role=​"tablist">​

しかし、それはそれが得る限りです。動的に作成されたコンテンツはいずれも変更されません。そして、divは通常のようにレンダリングされます（つまり、フォーマットはなく、リンクとテキストが交互に表示され、アコーディオンではありません！）

ご覧のとおり、私はアコーディオン（）の呼び出しをあちこちに分散させようとしましたが、役に立ちませんでした。

これは明らかに、エントリが動的に作成されるという事実と関係があります。しかし、グーグルは他の人が同様の設定でうまくやっているのを見つけるようです。

PS私は疲れていて無知なので、何かばかげているかもしれません！

    <script>
        $(document).ready(function() {

            $("#accordion").accordion({
                header: "h3"
            });

            $.ajax({
                type: "GET",
                url: "/api/blog",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(blogs) {
                    for (var i in blogs) {
                        $('#accordion').append(
                            $('<div/>').append(
                                $('<h3></h3>').append(
                                    $('<a href="#"/>').append(
                                        blogs[i].Title
                                    )
                                )
                            ).append(
                                $("<div/>").append(
                                    blogs[i].Body
                                )
                            )
                        );
                    }
                    $("#accordion").accordion({
                        header: "h3"
                    });
                }
            });
            $("#accordion").accordion({
                header: "h3"
            });
            $("#accordion2").accordion({
                header: "h3"
            });
        });
    </script>
</head>
    <body>
    <div id="accordion"></div>
    <div id="accordion2">
            <div>
                <h3><a href="#">First</a></h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                <h3><a href="#">Second</a></h3>
                <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                <h3><a href="#">Third</a></h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
        </div>
    </body>
</html>
4

1 に答える 1

0

1つは、アコーディオンを2回初期化する回数が多すぎるため、次の2つを削除しようとします。

$("#accordion").accordion({
                header: "h3"
            });

ただし、アコーディオンを初期化する前にコンテンツが読み込まれるように、ajax関数内にある初期化を保持します。

于 2012-09-13T18:49:18.410 に答える