Question

编辑：我昨晚真的很累，并且把我的jQuery写错了，“。readMore”总是触发它的各自div的动画。我道歉。

大家好，

我想从具有相同类的元素中提取特定信息。我有多个div包含不同数量的文本，因此，它们的高度也有所不同。但是，我已将与这些div关联的类设置为200px的高度。在每个div的底部，我有一个绝对定位的锚点，允许读者将div扩展（动画）为自动/自然高度。

我想要做的是找出具有相同类的div的'auto'高度，存储它，然后在点击相应div的锚点时稍后调用它。到目前为止，我只保留一个值或没有值，而我想要所有这些值。

我最近一直在使用.each（），但无济于事。真正的问题似乎是动画div，否则，没有问题;只需要使用.css（）将高度设置为auto。如果您可以将自己的高度设置为自动，这将会更加容易。我希望我能正确解释自己。无论如何，这是我的代码。

HTML

<div class="stretch">
    text
    <a class="readMore">Read More</a>
</div>

<div class="stretch">
    text
    <a class="readMore">Read More</a>
</div>

<div class="stretch">
    text
    <a class="readMore">Read More</a>
</div>

CSS

div.stretch {height:auto; width:100%; overflow:hidden; position:relative}
a.readMore {position:absolute; left:0; bottom:0;}

JQuery的

$divheight = //stored height of divs
$allheight = $divheight + 100; //extra space to clear the anchor
$(".h200").height(200);
$(".stretch").addClass("h200"); //change height later, to be able to refer to automatic/natural height

$(".readmore").toggle(
    function(){
        $(this).parent('div').animate({height:$allheight}, 750);
        $(".readMore").text("Read Less");
    },
    function(){
        $(this).parent('div').animate({height:"200px"}, 250);
        $(".readMore").text("Read More");
    }
)

谢谢它的推进，我非常感谢你，甚至看看。

Answer 1

试试这个：

$hiddenheight=200;
$extraspace=100;

$(".stretch")
.each(function(){
    $(this).data('actualheight', $(this).outerHeight()+$extraspace).css('height', $hiddenheight+'px');    //outerHeight for including padding+margin+border, if any
})
.toggle(
    function(){
        $(this).animate({height: $(this).data('actualheight')+'px'}, 750);
        $(".readMore").text("Read Less");
    },
    function(){
        $(this).parent('div').animate({height:$hiddenheight+"px"}, 250);
        $(".readMore").text("Read More");
    }
)

根据需要调整身高值。

Answer 2

$.height()将返回元素的实际高度。存储它，在调用hide时重新使用它。

像这样：

$(".stretch").toggle(
    function(){
        $(this).data('oh', $(this).height());
        $(this).animate({height: 200}, 750);
    },
    function(){
        $(this).animate({height: $(this).data('oh')}, 250);
        $(this).data('oh', null);
    }
)

JQUERY - 来自相同类元素的特定值

2 个答案: