请使用jQuery编码实现点击国家展示相应的城市且另外国家的城市隐藏

请使用jQuery编码实现点击国家展示相应的城市且另外国家的城市隐藏,效果如下图所示

img

img


  (function(){
      var area = [{'country':'中国','cities':['北京','上海','广州']},{'country':'美国','cities':['花生炖','烙山鸡','炙荚鸽']},{'country':'韩国','cities':['筋山','瘦耳','鸡粥焘']}]
      var ul = $('<ul></ul>')
      ul.appendTo($(document.body))
      for (var i=0;i<area.length;i++)
      {
          $('<li>'+area[i]['country']+'</li>').appendTo(ul)
      }
      $('ul>li').click(function(){
          var e = $('ul>li').index($(this))
          $(this).parent().find('>div').remove();
          $('<div>'+area[e].cities.join('</div><div>')+'</div>').appendTo($(this).parent())
      })
  })()

img

用jq选择器
$("li").eq(1) 直接操作元素。