给你写了一下,测试没有问题
!doctype htmlhtmlhead titlejQuery实现DIV层的收缩展开效果_网页代码站()/title script type=text/javascript src= style /* 收缩展开效果 */ .text { line-height: 22px; padding: 0 6px; color: #666; } .box h1 { padding-left: 10px; font-weight: bold; position:relative; } .bg{ width:100%; height: 22px; line-height: 22px; background: #f1f1f1; position:absolute; z-index:-1; } .box { position: relative; border: 1px solid #e7e7e7; } /style/headbody script type=text/javascript // 收缩展开效果 $(document).ready(function () { $(.box h1).toggle(function () { $(this).next(.text).animate({ height: 'toggle', opacity: 'toggle' }, slow); }, function () { $(this).next(.text).animate({ height: 'toggle', opacity: 'toggle' }, slow); }); $(.box h1 .bg).css(top,function(){ return ($(this).parent().height()/2 - $(this).height()/2)+px; }); }); /script !-- 收缩展开效果 -- div class=box h1 div class=bg/div 收缩展开效果 /h1 div class=text 1br / 2br / 3br / 4br / 5br / /div /div br / div class=box h1 收缩展开效果 div class=bg/div /h1 div class=text 1br / 2br / /div /div br / 第一次运行请刷新一下页面。 br //body/html
取消
评论