获取JSONP数据

Question

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？

Answer 1

为每个条目创建一个标题和内容元素，并在单击标题时切换内容元素的可见性：

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/