JQUERY-来自相同类别元素的特定值
|
编辑：昨晚我真的很累，并且将jQuery写错了，\ .readMore \始终是其各自div动画的触发器。我道歉。
大家好，
我想从具有相同类的元素中提取特定信息。我有多个包含不同数量文本的div，因此它们的高度也有所不同。但是，我将与这些div关联的类设置为200px的高度。在每个div的底部，我都有一个绝对定位的锚点，使读者可以将div扩展（动画化）到其自动/自然高度。
我想做的是找出具有相同类的div的'auto'高度，将其存储起来，然后稍后在单击各个div的锚点时调用它。到目前为止，我一直只获得一个价值或没有价值，而我希望所有价值。
我最近一直在使用.each（），但无济于事。真正的问题似乎是对div进行动画处理，否则就没有问题。只需使用.css（）将高度设置为自动。如果您可以将自己的身高设置为自动，这将容易得多。希望我能正确解释自己。无论如何，这是我的代码。
的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>
div.stretch {height:auto; width:100%; overflow:hidden; position:relative}
a.readMore {position:absolute; left:0; bottom:0;}
$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\");
}
)
没有找到相关结果
已邀请:
2 个回复
豪抱怒掳
$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\"); } )骇毖煽洁铂
$(\".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); } )