标签：style blog http color java 使用 io strong ar
使用jquery来设置html元素的显示与隐藏属性，同时调整div的高度
点击上面的“收起回复”超链接之后，执行下面几个动作：
a、“收起回复”变成“回复(3)”；
b、回复全部隐藏；
c、重新自适应高度。
再次点击“回复(3)”后，执行下面几个动作：
a、“回复(3)”变成“收起回复”；
b、回复全部显示；
c、重新自适应高度。
1、为了绑定jquery函数，先对html元素或div要设置 类class
2、实现“收起回复”和“回复(3)”之间的转换
对象：.replyTrigger
内容：使用一个超链接，通过点击后更换data-status的值“shown”和“hidden”，并修改text来更换内容。
<span> <a href="javascript:void(0)" class="replyTrigger" data-status="shown">收起回复</a> </span>
获取该元素：由于一个页面有很多个contentBlock，每一个contentBlock里面都有一个replyTrigger，所以我们要遍历所有contentBlock。然后在获取里面的replyTrigger。
3、完整代码
<block name="head">
<script type="text/javascript">
$(function(){
var $commentBlocks=$(".commentBlock");
$commentBlocks.each(function(){
//自适应高度
var $father=$(this);
var $infoDiv=$father.find(".infoDiv");
var $contentDiv=$father.find(".contentDiv");
var $innerCommentBlock=$father.find(".innerCommentBlock");
// 自适应高度
$infoDiv.height($contentDiv.height());
// 收起回复--回复
var $replyTrigger=$father.find(".replyTrigger");
$replyTrigger.click(function(){
//获取当前状态 data-status
var status=$replyTrigger.data("status");
if(status=="shown"){
$replyTrigger.data("status","hidden");
$replyTrigger.text("回复(3)");
// 隐藏回复,使用回调函数自适应高度。下同
$innerCommentBlock.slideUp(function(){
adjustDivHeight($infoDiv,$contentDiv);
});
}else{
$replyTrigger.data("status","shown");
$replyTrigger.text("收起回复");
// 显示回复
$innerCommentBlock.slideDown(function(){
adjustDivHeight($infoDiv,$contentDiv);
});
}
});
});
// 自适应高度函数，以contentDiv为基准
function adjustDivHeight($infoDiv,$contentDiv){
var contentHeight=$contentDiv.height();
$infoDiv.animate({height:contentHeight},"slow");
}
});
</script>
</block>
标签：style blog http color java 使用 io strong ar
原文地址：http://www.cnblogs.com/wingjay/p/3930284.html
