<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>一种网页内容呈现方式</title> <style> .box-now{cursor:pointer;background-color:#eee;} .qfbd{width:400px;height:auto;border:1px solid #333;} .box{height:34px;overflow:hidden;clear:both;border:1px solid #999;} .box .tit{height: 33px;line-height: 33px;text-align: left;border:1px solid #ccc;} .box .pt{} .box .pt:after{content:".";display:block;visibility:hidden;height:0px;clear:both;} </style> <script src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> <script type="text/javascript"> jQuery(function(jq){ var cls = "box-now"; var rd = jq('#sdyd-frag'); var divs = rd.find('.box'); var dur = 600, h = {min:34, max:193}; divs.mouseover(function(el){ el = jq(this); divs.not(el).removeClass(cls).stop().animate({'height':h.min},dur,'linear'); el.stop().animate({'height':h.max},dur,'linear'); el.addClass(cls); }); divs.css({'height':h.min}).eq(0).css({'height':h.max}); divs.eq(0).addClass(cls); }); </script> </head> <body> <div id="sdyd-frag" class="qfbd"> <div class="box"> <div class="tit">标题一</div> <div class="pt">内容一</div> </div> <div class="box"> <div class="tit">标题二</div> <div class="pt">内容二</div> </div> <div class="box"> <div class="tit">标题三</div> <div class="pt">内容三</div> </div> <div class="box"> <div class="tit">标题四</div> <div class="pt">内容四</div> </div> <div class="box"> <div class="tit">标题五</div> <div class="pt">内容五</div> </div> <div class="box"> <div class="tit">标题六</div> <div class="pt">内容六</div> </div> </div> </body> </html>