JQuery hide/slideToggle 范围内的元素

debugcn 发表于 Dev

naut92

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

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>

naut92

这是解决方案：

(function($, undefined){
 $(function(){
 $(document).ready(function(){


//bind handlers
function domHandlers() {
    $('.animal-id').click(function(e){
        slideToggle(e);
    });
}


function renderAnimalsList(jsonData) {
    var list = jsonData;

    $.each(list, function (i, animal) {
        $('#animalsList').append('<li><a href="#!" class="animal-id"> Animal Id: '   + animal.id + '</a></li>');

        //With details:
        $('#animalsList').append('<li class="animal-details hidden">' +
            'Name: ' + animal.animalname + '<br>' +
            'Birthday: ' + animal.dateborn + '<br>' +
            ' Sex: ' + animal.sex + '<br>' +
            ' Type animal: ' + animal.typesanimalsId + '</li>');
    });
}


function slideToggle(e) {

    $('.animal-details ').addClass('hidden');
    $(e.target).closest('li').next().removeClass('hidden');

}


renderAnimalsList(jsonData);

domHandlers();
   });
  });
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。