取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" 
     } 
    }); 
}); 

FIDDLE

我想看到的输出上的标题menu.when点击它会显示内容和形象也。我将如何使用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/