javascript - JQuery hide/slideToggle范围内的元素

Question

我是 jQuery 新手，正在寻找解决方案，如何添加 ul id = "animalsListDetails" 列表，在 HTML 页面上隐藏/显示并呈现此范围，当单击 a -引用:

function renderAnimalsList(data) {
    var list = data == null ? [] : (data instanceof Array ? data : [data]);

    $('#animalsList li').hide();
    $('#animalsListDetails li').hide();
    $.each(list, function (index, animals){ 

        $('.animals').click(function () {
        $(this).next().slideToggle();
    }).append('<ul id="animalsList"><li><a href="#"> Animal Id: ' + animals.id + '</a><br> <ul id="animalsListDetails"><li> Name: '+ animals.animalname + '<br> Birthday: ' + animals.dateborn + '<br> Sex: ' + animals.sex + '<br> Type animal: ' + animals.typesanimalsId + '</li></ul></li></ul>');
});

}

调用函数:

function findAnimalByCustomerId(customerId){
    console.log('findAnimalByCustomerId: ' + customerId);
    $.ajax({
        type: 'GET',
        url: customerlistURL + '/' + customerId + '/myanimals',
        dataType: "json",
        success: function (data) {
            console.log('findAnimalByCustomerId success: ' + customerId);
            renderAnimalsList(data);
        }
    });
}

HTML:

<div class="animals">


    </div>

Answer 1

如果问题的主要动机是知道如何添加列表，则以下答案显示了模拟数据。如果您想了解更多信息，请在评论中提问(尝试立即定义您的问题)。

function renderAnimalsList(data) {
  var list = data == null ? [] : (data instanceof Array ? data : [data]);

  $('#animalsList li').hide();
  $('#animalsListDetails li').hide();
  $.each(list, function(index, animals) {

    $('.animals').click(function() {
      console.log(this);
      $(this).next().slideToggle();
    }).append('<ul id="animalsList"><li><a href="#"> Animal Id: ' + animals.id + '</a></li>');
    //whith details
    $('#animalsList').append('<ul id="animalsListDetails"><li>Name: ' + animals.animalname + '<br> Birthday: ' + animals.dateborn + '<br> Sex: ' + animals.sex + '<br> Type animal: ' + animals.typesanimalsId + '</li></ul>');
  });
}

var animals = [{
  animalname: 'Tiger',
  dateborn: '----.--.--',
  sex: 'M',
  typesanimalsId: 1,
  id: 10
}, {
  animalname: 'Tiger 2',
  dateborn: '----.--.--',
  sex: 'M',
  typesanimalsId: 1,
  id: 11
}, {
  animalname: 'Tiger 3',
  dateborn: '----.--.--',
  sex: 'M',
  typesanimalsId: 1,
  id: 12
}]

function findAnimalByCustomerId(customerId) {
  // This function is useless in this context
  console.log('findAnimalByCustomerId: ' + customerId);
  $.ajax({
    type: 'GET',
    url: customerlistURL + '/' + customerId + '/myanimals',
    dataType: "json",
    success: function(data) {
      console.log('findAnimalByCustomerId success: ' + customerId);
      renderAnimalsList(data);
    }
  });
}

//This ready function will be calling renderAnimalsList in same way as it will be called in above findAnimalByCustomerId
$(document).ready(function() {
  renderAnimalsList(animals);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="animals">
  <div id="animalsList"></div>
  <div id="animalsListDetails"></div>
</div>