jquery.height() 獲取指定元素高度的bug

獲取元素高度一直是用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');
改爲
	var detail = jQuery('.product-collateral .box-collateral .std :last');

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章