Question

似乎无法让这个工作，任何想法？

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

你的元素之间的关系是错误的。 closest会搜索最近的祖先，但articleSlide div不是该链接的祖先。它是其父的 兄弟。这可行：

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

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

Answer 3

尝试使用.live（）方法绑定click事件，因为您正在动态地将锚点添加到DOM。此外，您不需要为每个'.articleSlide'添加属性“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（）”函数。

jQuery - Animate高度无法按预期工作

3 个答案: