首页 > 代码库 > 公益图书馆-学习笔记五
公益图书馆-学习笔记五
使用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>
公益图书馆-学习笔记五
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。