使用jquery来设置html元素的显示与隐藏属性,同时调整div的高度
注意1:jquery无法获取图片高度!因为jquery是在网页框架加载完就立即执行,此时网页里的图片还没有加载,被jquery认为高度为0,而实际高度不是0,就会造成偏差。最好自己设定图片高度。
注意2:如果一个超链接标签 a 要绑定一段jquery函数,则设置<a herf="javascript:void(0)">超链接</a>
点击上面的“收起回复”超链接之后,执行下面几个动作:
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>
if(status=="shown"){
$replyTrigger.data("status","hidden");
$replyTrigger.text("回复(3)");
}else{
$replyTrigger.data("status","shown");
$replyTrigger.text("收起回复");
}
3、实现回复的隐藏与显示:
点击“收起回复”/“回复”超链接,使用jquery的slideUp、slideDown函数来隐藏与显示
if(status=="shown"){
$replyTrigger.data("status","hidden");
$replyTrigger.text("回复(3)");
// 隐藏回复,使用回调函数自适应高度。下同
$innerCommentBlock.slideUp();
}else{
$replyTrigger.data("status","shown");
$replyTrigger.text("收起回复");
// 显示回复
$innerCommentBlock.slideDown();
}
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback
回调函数是jquery的灵魂所在,即运行完一个函数后立即调用回调函数。
4、关键!div之间的高度自适应:
分别按slideUp和slideDown分情况
Up有3种情况,Down有2种情况。
// 初始化高度
function initDivHeight($infoDiv,$contentDiv){
var contentHeight=$contentDiv.height();
var infoHeight=$infoDiv.height();
if(infoHeight>contentHeight){
$contentDiv.height(infoHeight);
}else{
$infoDiv.height(contentHeight);
}
}
// slideUp的回调函数
function upAdjustHeight($infoDiv,$contentDiv,realInfoHeight,realContentHeight){
var contentHeight=$contentDiv.height();
var infoHeight=$infoDiv.height();
if(realContentHeight>realInfoHeight){
if(contentHeight>realInfoHeight){
$infoDiv.animate({height:contentHeight});
// $infoDiv.height(contentHeight);
}else{
$infoDiv.animate({height:realInfoHeight});
// $infoDiv.height(realInfoHeight);
}
}
}
// slideDown的回调函数
function downAdjustHeight($infoDiv,$contentDiv){
var contentHeight=$contentDiv.height();
var infoHeight=$infoDiv.height();
if(contentHeight>=infoHeight){
$infoDiv.animate({height:contentHeight});
// $infoDiv.height(contentHeight);
}
}
5、简单版代码(不考虑div的高度自适应,以右边div为基准):
<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>