0

HTML マークアップ:

<ul>
    <li class="entries"></li>
</ul>

jQuery コード:

$(function () {
    $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql",
        dataType: "jsonp",
        success: function (data) {
            console.log(data.query.results.json);
            $.each(data.query.results.json.entries, function (i, v) {
                $('#entries').append(data.query.results.json.entries[i].content + '<br />');
            });
        }, data: {
            q: 'select * from json where url="https://www.facebook.com/feeds/page.php?id=397319800348866&format=json"',
            format: "json"
        }
    });
});

フィドル

出力をメニューとして表示したい.タイトルをクリックすると、コンテンツと画像も表示されます。jQueryとhtmlでこれを行うにはどうすればよいですか?

4

1 に答える 1

2

各エントリのタイトルとコンテンツ要素を作成し、タイトルをクリックしたときにコンテンツ要素の表示を切り替えます。

Javascript：

$(function () {
    $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql",
        dataType: "jsonp",
        success: function (data) {
            console.log(data.query.results.json);
            $.each(data.query.results.json.entries, function (i, v) {
                $('#entries').append(
                    $('<div>').addClass('header')
                    .html(data.query.results.json.entries[i].title)
                    .append(
                        $('<div>').addClass('content')
                        .html(data.query.results.json.entries[i].content)
                    )
                );
            });
        }, data: {
            q: 'select * from json where url="https://www.facebook.com/feeds/page.php?id=397319800348866&format=json"',
            format: "json"
        }
    });

    $('#entries').on('click', '.header', function(){
        $('.content', this).toggle();
    });
});

CSS：

.header { margin: 5px; background: #eee; padding: 5px; }
.content { display: none; }

デモ： http： //jsfiddle.net/DtNxb/5/

于 2012-12-19T11:02:37.540 に答える