javascript - slidedown ( jQuery ) 工作不正常

  显示原文与译文双语对照的内容

这是我的jQuery代码,用于添加在div中发布的html 。 slidedown() 函数似乎不正常工作。 这是我的剧本:


$(".expand").click(function(){
 var button = $(this);
 var id = $(this).attr("eid");
 var url ="/get-complete/" + id + '/';
 $.ajax({ 
 type:"GET", 
 url: url, 
 success: function( data ) { 
 var obj = $.parseJSON(data);
 var lang = '';
 $.each(obj, function() {
 lang += this['html'] +"<br/>";
 });
 button.siblings('.comment-expand').slideDown('slow', function(){
 button.siblings('.comment-expand').html(lang);
 }); 
 button.attr('class', 'collapse');
 button.html('Collapse');
 }, 
 });
 return false;
 });

下面是 html:


<a class="expand" href="/#" eid="{{ event.id }}">Expand</a>

<div class="comment-expand"></div>

这是get请求返回的示例数据:


[{"html":"n <div class="comment-count-bar">n</div>n"}]

这是 collapse的代码,但这也不能工作:


$("body").delegate(".collapse","click", function(){
 var button = $(this);
 button.siblings('.comment-expand').slideUp('slow');
 button.attr('class', 'expand');
 button.html('Expand');
 return false;
 });

时间: 作者:

尝试这个:


$.ajax({ 
 type:"GET", 
 url: url,
//setting the dataType to json, jQuery itself parses the response 
 dataType: 'json', 
 success: function(data) { 
//Hiding the element and setting it's innerHTML 
//before calling slideDown()
 button.siblings('.comment-expand').hide().html(function() {
//Mapping the response and concatenating `html` properties
//If the response has only one array use:
//return data[0].html + '<br>'; instead
 return $.map(data, function(v) {
 return v.html + '<br>';
 }).join('');
 }).slideDown(); 
 button.addClass('collapse')
. removeClass('expand')
. html('Collapse');
 }, 
});

编辑:由于你要动态添加类,因此应该委托该事件:


$(document).on('click', '.collapse', function() {
//var button = $(this);
//...
});

作者:
...