公益图书馆-学习笔记五-jquery来动态设置div高度

使用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>