jQuery - 动画高度不能按预期工作

Question

似乎无法使此工作，任何想法？

http://jsfiddle.net/U92bM/

的JavaScript：

$('.articleSlide').each(function() { 
    var current = $(this); 
    current.attr("box_h", current.height()); 
}); 

$(".articleSlide").css("height", "100px"); 

$(".showHide").html('<a href="#">More</a>'); 

$('.showHide a').click(function() { 
    var open_height = $(".articleSlide").attr("box_h") + "px"; 
    $(this).closest("articleSlide").animate({"height": open_height}, {duration: "slow" }); 
}); 

HTML：

<div class="articleSlide"> 
    <!-- lots of text --> 
</div> 

<div class="showHide"></div> 

Answer 1

试试这个：

$('.articleSlide').each(function() { 
    var current = $(this); 
    current.attr("box_h", current.height()); 
}); 

$(".articleSlide").css("height", "100px"); 

$(".showHide").html('<a href="#">More</a>'); 

$('.showHide a').click(function() { 
    var open_height = $(".articleSlide").attr("box_h") + "px"; 
    $(this).parent().parent().children('.articleSlide') 
     .animate({"height": open_height}, "slow"); 
}); 

http://jsfiddle.net/maniator/U92bM/5/

你必须转到锚标签的祖父母，以便找到你想要操作

的作品就像一个魅力^ _^

Answer 2

尝试，因为你用.live（）方法，结合你的点击事件的元素'动态添加锚点到DOM。另外，你不需要为每个'.sicleSlide'添加一个属性“box_h”，给它们'current.height（）'的值。请准时使用高度。差不多是这样的：

$('.showHide a').live('click', function() { 
    var open_height = $(".articleSlide").height() + "px"; 
    $(this).closest("articleSlide").animate({"height": open_height}, {duration: "slow" }); 
}); 

又是怎么回事：

$('.showHide a').click(function(e) { 
    var open_height = $(e.target).height() + "px"; 
    $(this).closest("articleSlide").animate({"height": open_height}, {duration: "slow" }); 
}); 

使用“e.target”，以确保你得到正确的链接的高度。我假设你测试过以确保.click（）工作正常。你也可以测试相同的动画，但删除了“px”字符串，因为我尝试过这一次，它的工作。你可以完全删除“.each（）”函数。

Answer 3

你得到了元素之间的关系错误。 closest搜索最近的祖先但articleSlide div不是链接的祖先。它的母公司的兄弟姐妹是。这会工作：

$(this).parent().prev().animate(...); 

http://jsfiddle.net/U92bM/7/