获取元素高度一直是用height(),但没想到这个还是存在bug。

当指定元素不只是一行的时候,那就没办法获取真实的高度了,做了一下测试才发现,原来jquery的height ()只是获取css指定的line-height而已,当存元素包含在多行文字时,也只能获取一行的line-height,

项目《手机版页面》通过元素行高来判断是否使用More Detail显示更多介绍

HTML如下:

<div class="product-collateral">
   <div class="box-collateral box-description">
      <h2 class="nav_btui" style="border-top:1px solid #f5f5f5; ">Spezifikationen <a href="#" class="show_icon nav_tit ui-link"><i class="icon-arrow-up"></i></a></h2>
	<div class="std hide">
           <li>【Hochwertig】Tischplatte aus E1 Spanplatte mit Melamin-Furnier hergestellt, Tischbeine aus Stahlrohr, langlebig, robust und umweltfreundlich, leicht zu reinigen
</li>
           <li>【Vielfältig einsetzbar】Als Computertisch, Schreibtisch, Bürotisch, Konferenztisch usw. dienen
</li>
           <li>【Große Tischplatte】Genug benutzbar Platz und viele Ablagemöglichkeiten; Mit Melaminharzbeschichtung ausgestattet, glatt, kratzfest und leicht zu reinigen
</li>
           <li>【Feines Design】Abgerundete Ecken der Tischplatte für mehr Sicherheit; Tischplatte In der Holz Farbe, geeignet für alle Raumstil, nie veralten
</li>
           <li>【Einfaches Aufbauen】Einfache Struktur, leicht aufzubauen    </li></div><a href="javascript:void(0)" class="showmore">Mehr Details</a>
        </div>  
  </div>
</div>

CSS如下:

.product-collateral .box-collateral *{line-height: 20px;padding: 0px;}
.product-collateral .box-collateral li{padding-left:1rem;list-style: none;}
.product-view .box-description .std { margin:0;margin-bottom: 15px;}
.product-view .box-description .std table{width:100% !important;}/*强制表格不越屏*/
.product-view .box-description .std img{max-width:100% !important;}/*强制图片不越屏*/

.product-view .box-description .hide {max-height:120px;overflow: hidden; }
.product-view .box-description .show {max-height:none;overflow:none; }
.product-view .box-description .showmore{text-align: center;display: block;line-height: 30px;}

JQUERY如下:

jQuery(document).ready(function(){
	var detail = jQuery('.product-collateral .box-collateral .std');
	var init_height = detail.height();//获取初始高度
	detail.addClass('hide');//增加限高样式
	var max_height = parseInt(detail.css('max-height'))//获取限制高度
	var now_height = parseInt(detail.height())//获取限制高度
	if(init_height>now_height){
		//如果初始高度大于限高后的高度,则显示更多选择
		detail.after("<a href='javascript:void(0)' class='showmore'>More Details</a>");
	}
	jQuery('.product-collateral .box-collateral .showmore').live("click", function(){
		if(jQuery(this).text()=='More Details'){
			jQuery(this).text('Hide Details');
		}else{
			jQuery(this).text('More Details')
		}
		jQuery(this).prev().toggleClass('hide');
	});
	jQuery('.product-collateral .box-collateral .show_icon').live("click", function(){
		jQuery(this).parent().next().toggle('1000');
		jQuery(this).parent().nextAll('.showmore').first().toggle();
		jQuery(this).children().toggleClass('icon-arrow-bottom');
		// jQuery(this).toggleClass('ui-icon-carat-u');
	});

});

临时解决方案:

	var detail = jQuery('.product-collateral .box-collateral .std');

改为

<span style="color:#ff0000">	var detail = jQuery('.product-collateral .box-collateral .std :last');</span>